Vue3 中自定义 Toast

在 Vue，在H5中经常有吐司提示，如果觉得三方库仍然不满足产品需求，那我们就不得不进行自定义Toast了。

一、创建 Toast.vue 文件

二、创建 index.ts 文件

import { createVNode, render } from "vue";
import Toast from "./Toast.vue";

const div = document.createElement("div");
div.setAttribute("class", "toast");
document.body.appendChild(div);

let time = null;
export const toast = (text, duration: number = 1500) => {
  const NODE = createVNode(Toast, { text });
  render(NODE, div);
  clearTimeout(time);
  time = setTimeout(() => {
    render(null, div);
  }, duration);
};

三、使用

如果项目中多个页面都会用到，可以将toast对象挂载全局使用，在vue3中可以这样挂载。

import { toast } from "./views/common/components/Toast";
const app = createApp(App);
app.config.globalProperties.$toast = toast;
app.mount("#app");

然后在我们就可以在任意组件中这样使用了

this.$toast('您已学习过vue3！', 2000);

创作不易，看完点个赞呗！

参考博客：
Vue3.0 如何挂载全局属性和方法 - (jianshu.com)