vue modal 组件 、toast 组件 封装

1.Q：modal

A：

watch:{

        value:function(val){

            this.isShow = val

        },

 isShow:function(val){

            this.$emit('input',val)

        }

    },

 v-model="isShowModel"> //组件调用时

2.Q：toast

A：

methods:{

        closeToast(){

            this.showToast = false;

        }

    }

import ToastComponent from './Toast.vue'// 引入先前写好的vue

const Toast = {};
// 注册Toast

Toast.install = function (Vue) {

    // 生成一个Vue的子类

 const ToastConstructor = Vue.extend(ToastComponent)

    // 生成一个该子类的实例

    const instance = new ToastConstructor();

    // 将这个实例挂载在我创建的div上

    // 并将此div加入全局挂载点内部

instance.$mount(document.createElement('div'))

    document.body.appendChild(instance.$el)

    // 通过Vue的原型注册一个方法

    // 让所有实例共享这个方法

 Vue.prototype.$toast = (msg,toastType) => {

        instance.msg = msg;

        instance.toastType=toastType;

        instance.showToast = true;

        setTimeout(() => {

            instance.showToast = false;

        }, 3000);

    }

}

export default Toast