vue自定义弹窗组件

首先我们在src文件夹下新建个toast文件夹，然后再建个Toast.vue，接着再建个toast.js，如下图所示:

vue自定义弹窗组件

这些文件建好之后，我们先开始写toast.js的内容:

1、先引入vue:import vue from "vue"。

2、再引入Toast.vue:import toastComponent from './toast/Toast.vue'。

3、创建一个组件构造器:const ToastConstructor = vue.extend(toastComponent)

4、定义函数 接受2个参数，要显示的文本和显示时间:

vue自定义弹窗组件

5、注册全局组件的函数:function registryToast() {

  // 将组件注册到 vue 的 原型链里去,

  // 这样就可以在所有 vue 的实例里面使用 this.$toast()

  vue.prototype.$toast = showToast

}

6、暴露出注册全局组件的函数:export default registryToast

这样toast.js就写完了，接着写Toast.vue

用v-if=“showWrap”来控制显示隐藏，用:class绑定类名显示淡入淡出的效果。

vue自定义弹窗组件

写完这个后再加一些css样式:

vue自定义弹窗组件

再main.js里引入toast.js:

import toastRegistry from './toast'

Vue.use(toastRegistry)

最后在各个组件里引入调用:

import Toast from '@/toast/Toast.vue'

components:{

              Toast,//弹窗组件

    }, 

mounted(){

this.$toast("hello world");

}