vue3消息提示框组件封装

直接上代码....

<script lang="ts" setup >
defineProps<{ type: "success" | "error" | "warning"; txt: string }>();

// 定义一个对象，包含三种情况的样式，对象key就是类型字符串
const style = {
  warning: {
    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)",
  },
};
</script>

<template>
  <div class="xtx-message" :style="style[type]">
    <i class="iconfont" :class="style[type].icon"></i>
    <span class="text"> {{txt}}</span>
  </div>
</template>

<style scoped lang="less">
.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>

 定义个ts文件 以函数调用的形式使用,代码看起来更清爽

import XXX from "XXX";    
import { h, render } from "vue";
const div: any = document.createElement("div");
document.body.appendChild(div);
let timeId: any = -1;
export default function message(type: string, txt: string) {
  const vnode = h<{}>(XtxMessage, { type, txt });
  render(vnode, div);   //挂载到dom上去
  clearTimeout(timeId);
  timeId = window.setTimeout(() => {
    render(null, div);    //一秒后取消弹窗
  }, 1000);
}
message.success = (val: string) => {
  message("success", val);
};
message.waring = (val: string) => {
  message("waring", val);
};
message.error = (val: string) => {
  message("error", val);
};

使用

import xxx from xxx.ts 
message.success('登录成功')