vue自定义toast插件

1. 创建配置文件index.js 和Toast.vue模板

import Toast from  './Toast'
const obj = {}
obj.install = function (Vue) {
    // console.log('执行toast函数',Vue);
    // Vue.prototype.$toast = 对象    将$toast 加入到vue原型中
    //1.创建组件构造器
    const toastContrustor = Vue.extend(Toast)   //将toast组件添加到构造器中
    //2.new的方式，根据创建的构造器，创建一个组件对象
    const toast = new toastContrustor()
    //3.将组件对象手动挂载到某个元素中  $mount  挂载
    toast.$mount(document.createElement('div'))
    //4.toast.$el就是对应的div  将 div添加到body中
    document.body.appendChild(toast.$el)
    Vue.prototype.$toast = toast
}
export default obj

<template>
   <div class="toast" v-show="isShow">
       {{message}}
   </div>
</template>

<script>
export default {
   data() {
       return {
           isShow:false,
           message:''
       }
   },
   methods:{
       show(message,duration) {
           this.message = message;
           this.isShow = true;
            setTimeout(() => {
                this.isShow = false;
                this.message = ''
            },duration)
       }
   }
}
</script>

<style  scoped>
    .toast{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 15px 25px;
        color: #fff;
        background: rgba(0, 0, 0, .7);
        z-index: 999;
        border-radius: 10px;
        text-align: center;
    }
    
</style>>

</style>

2. 引入到Main.js注册

//自定义toast插件
import toast from 'common/toast'
Vue.use(toast)

3. 调用安装的插件

this.$toast.show(res, 1000)