把组件封装成一个massage方法

首先我们需要一个组件，组件可以自己根据自己的业务需求进行封装，这边我给你一个我自己的模板，可以先根据这个模板做调试，或二次修改使用、

<template>
  <Transition name="down">
    <div class="message" :style="style[type]" v-show="visible">
      <!-- 上面绑定的是样式 -->
      <!-- 不同提示图标会变 -->
      <i class="iconfont" :class="[style[type].icon]"></i>
      <span class="text">{
   
   { text }}</span>
    </div>
  </Transition>
</template>
<script>
import { onMounted, ref } from "vue";
export default {
  name: "Message",
  props: {
    text: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      // warn 警告  error 错误  success 成功
      default: "warn",
    },
  },
  setup() {
    // 定义一个对象，包含三种情况的样式，对象key就是类型字符串
    const style = {
      warn: {
        icon: "icon-warning",
        color: "#E6A23C",
        backgroundColor: "rgb(253, 246, 236)",
        borderColor: "rgb(250, 236, 216)",
      },
      error: {
        icon: "icon-shanchu",
        color: "#F56C6C",
        backgroundColor: "rgb(254, 240, 240)",
        borderColor: "rgb(253, 226, 226)",
      },
      success: {
        icon: "icon-queren2",
        color: "#67C23A",
        backgroundColor: "rgb(240, 249, 235)",
        borderColor: "rgb(225, 243, 216)",
      },
    };
    // 定义一个数据控制显示隐藏，默认是隐藏，组件挂载完毕显示
    const visible = ref(false);
    onMounted(() => {
      visible.value = true;
    });
    return { style, visible };
  },
};
</script>
<style scoped lang="less">
//这里时动画效果
.down {
  &-enter {
    &-from {
      transform: translate3d(0, -75px, 0);
      opacity: 0;
    }
    &-active {
      transition: all 0.5s;
    }
    &-to {
      transform: none;
      opacity: 1;
    }
  }
}
.xtx-message {
  width: 300px;
  height: 50px;
  position: fixed;
  z-index: 9999;
  left: 50%;
  margin-left: -150px;
  top: 25px;
  line-height: 50px;
  padding: 0 25px;
  border: 1px solid #e4e4e4;
  background: #f5f5f5;
  color: #999;
  border-radius: 4px;
  i {
    margin-right: 4px;
    vertical-align: middle;
  }
  .text {
    vertical-align: middle;
  }
}
</style>

模板弄好了，可以直接引入当组件使用，但是我们比如请求失败或者成功的时候给提示，那么还需要引入组件，还要给组件使用v-if做变量判断，特别麻烦，所有我们可以把它封装成一个方法，可以直接调用的，只需要传入状态和文本就可以使用的那种

接下来创建一个js文件

// 实现使用函数调用xtx-message组件的逻辑
import { createVNode, render } from "vue";
import Message from "./message.vue";

// 准备dom容器
const div = document.createElement("div");
// 给div添加一个属性
div.setAttribute("class", "message-container");
document.body.appendChild(div);
// 定时器标识
let timer = null;

export default ({ type, text }) => {
  // 实现：根据xtx-message.vue渲染消息提示
  // 1. 导入组件
  // 2. 使用createVNode创建虚拟节点
  // 他的三个参数分别是，要变成虚拟节点的组件，接收的值，子节点
  const vnode = createVNode(Message, { type, text });
  // 3. 准备一个DOM容器
  // 4. 把虚拟节点渲染DOM容器中
  render(vnode, div);
  // 5. 开启定时，移出DOM容器内容
  clearTimeout(timer);
  timer = setTimeout(() => {
    // 销毁虚拟节点
    render(null, div);
  }, 2000);
};

这里呢创建了一个Massage的js文件，引入了createVNode和render来创建和渲染虚拟dom，

这里的代码使用了 Vue 3 提供的 createVNode 和 render 方法来手动创建虚拟 DOM，并将其进行渲染。与 JSX 不同，createVNode 是以函数的形式返回一个虚拟节点对象，需要手动指定组件、属性以及子节点等信息。而 render 方法则将虚拟节点渲染为真实 DOM 后挂载到页面中。

相对于 JSX，使用手动创建虚拟 DOM 的方式更加灵活，在一些特殊场景下也更加合适。同时，手动创建虚拟 DOM 可以更好地理解 Vue 内部的运作原理，有助于对 Vue 框架的深入理解。

这里呢我也没有特别的需求，所有就把显示的时长固定为了两秒，如果需要的话可以多加一个参数，然后传入显示时长

接下来就可以直接引入使用了

import Message from "@/components/library/Message";
setuu(){
  const login = ()=>{
    Message({ type: "success", text: "登录成功" });

}

}

当然也考虑到了你可能需要使用this来调用这个方法，那么可以直接把这个给挂在到vue原型上去

import Message from "./Message";
  install(app) {
          app.config.globalProperties.$message = Message; // 原型函数
}
//这样就可以直接使用this来调用了
this.$message

把组件封装成一个massage方法

猜你喜欢