Vue3封装Message消息提示框

实例效果

样式结构

js交互 简单样式

js交互逻辑代码

import XtxMessage from "./XtxMessage.vue";
import { h, render } from "vue";

const div = document.createElement("div");
div.className = "xtx-message-container";
document.body.appendChild(div);

export default function Message(
  type: "success" | "error" | "warning",
  text: string,
  directive: number
) {
  const vNode = h(XtxMessage, { type, text, directive });
  render(vNode, div);
  setTimeout(() => {
    render(null, div);
  }, directive);
}

Message.success = function (text: string, directive = 5000) {
  Message("success", text, directive);
};

Message.error = function (text: string, directive = 5000) {
  Message("error", text, directive);
};

Message.warning = function (text: string, directive = 5000) {
  Message("warning", text, directive);
};