toast弹框组件的封装-插件方式

我们这里打算做一个弹框功能

当我们点击加入购物车的时候 就会弹出这个弹框，把它做成插件方式的好处，我们引用的时候就很简单，只需要用this.$toast就可以了，

首先我们要写一个插件

<template>
    <div class="toast" v-show="isShow">
        <div>{{message}}</div>
    </div>
</template>
    <script>
        export default {
            name: "Toast",
            data() {
                return {
                    message: '',
                    isShow: false
                }
            },
           methods: {
               show(message,duration) {
                   this.isShow = true ;
                   this.message= message;
                   setTimeout(()=>{
                       this.isShow = false;
                       this.message = ''
                   },duration)
               }
           }
        }
    </script>
    <style scoped>
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 8px 10px;
            color: #fff;
            background-color: rgba(0, 0, 0, .75);
            z-index: 999;
        }
    </style>

然后我们需要根据这个组件构建组件对象，并把这个对象上传到Vue.prototype上去 方便每个组件的使用

import Toast from './Toast'
const obj = {}
obj.install = function (Vue) {
    //1.创建组件构造器
    const toastContrustor = Vue.extend(Toast)
    //2.new的方式，根据组件构造器，可以创建出一个组件对象
    const toast = new toastContrustor()
    //3.将组件对象，手动挂载到某一个元素上
    toast.$mount(document.createElement('div'))
    //4.toast.$el对应的就是div
    document.body.appendChild(toast.$el)
    
    Vue.prototype.$toast = toast;
}
export default obj 

然后我们需要在main.js上引入这个插件

 

import toast from 'components/common/toast'

Vue.use(toast)

然后我们就可以直接在插件中引用

 that.$toast.show("这里添加内容”, 2000)