Vue3版本开发toast插件

Vue3版本开发toast插件

Vue3的Toast插件是一种消息提示组件，主要用于消息通知、加载提示、操作结果提示等醒目提示效果。Toast组件几乎是没有个组件库必备的组件，通过Toast组件开发可以比较全面的学习Vuejs的相关技能点。

新建目录

在src目录下新建文件夹plugins，在plugins中新建文件夹my-toast，然后在这个文件夹里新建一个mytoast.vue和一个index.ts

mytoast.vue

<template>
  <div class="toast-wrap">
    {{ message }}
  </div>
</template>
  
<script>
export default {
  name: "my-toast",
  props: {
    message: {
      type: String,
      default: ""
    }
  }
}
</script>

<style>
.toast-wrap {
  background-color: #000;
  padding: 8px 15px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  position: fixed;
  z-index: 99;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
}
</style>
  

你需要调用的主页面（测试的时候我直接把app.vue改了）

<template>
  <div>
    <button @click="showToast()">显示toast</button>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance } from 'vue';

//getCurrentInstance：可以获取到组件的实例
let {proxy}:any = getCurrentInstance();

const showToast = () => {
  proxy.$myToast({
    message:"我是toast插件",
    duration:3000,
    onClose:()=>{
      console.log("已关闭");
      
    }
})
}

</script>


<style>

</style>

main.ts注册

import MyToast from './plugins/my-toast'
app.use(MyToast)

index.ts

接下来就是写$myToast的全局注册，在my-toast文件夹下面的index.ts写：

import MyToast from './mytoast.vue';
//createVNode：创建虚拟dom
//render：渲染
import { createVNode,render } from 'vue';

interface IOptions{
    message:string,
    duration?:number,
    onClose?:any
}
export default{
    install:(app:any)=>{
        //是否存在toast，防止toast在未销毁前连续点击按钮触发虚拟dom
        let isToast=false;
        //app.config.globalProperties注册全局方法，相当于vue2的Vue.prototype
        app.config.globalProperties.$myToast = function(opts:IOptions){
            //如果toast不存在，开始创建toast
            if(!isToast){
                isToast=true;//在toast未销毁前，不执行以下程序
                //创建虚拟节点
                const vm:any  = createVNode(MyToast);
                console.log(vm);
                
            }
        } 
    }
}

到现在就是可以打印出虚拟节点vm的内容看一下，就是

继续写index.ts：

import MyToast from './mytoast.vue';
//createVNode：创建虚拟dom
//render：渲染
import { createVNode,render } from 'vue';

interface IOptions{
    message:string,
    duration?:number,
    onClose?:any
}
export default{
    install:(app:any)=>{
        //是否存在toast，防止toast在未销毁前连续点击按钮触发虚拟dom
        let isToast=false;
        //app.config.globalProperties注册全局方法，相当于vue2的Vue.prototype
        app.config.globalProperties.$myToast = function(opts:IOptions){
            //如果toast不存在，开始创建toast
            if(!isToast){
                isToast=true;//在toast未销毁前，不执行以下程序
                //创建虚拟节点
                const vm:any  = createVNode(MyToast);
                //创建div容器
                const container =  document.createElement("div");
                //渲染虚拟节点
                render(vm,container);
                //将创建好的div元素添加到body元素内
                document.body.appendChild(container);
                //设置toast.vue文件中的props选项内部的message的值
                vm.component.props.message=opts.message || "";
                const duration = opts.duration || 2000;
                setTimeout(()=>{
                    //销毁toast
                    document.body.removeChild(container);
                    //toast销毁后将isToast设置为false，可以再次创建toast
                    isToast=false;
                    //如果存在onClose方法
                    if (opts.onClose) {
                        //调用onClose
                        opts.onClose();
                    }
                },duration)
            }
        } 
    }
}

测试

点击按钮后：

三秒后会消失，并且控制台打印

这就是调用了onClose方法。