Vue.extend详解，自定义toast弹窗

//定义一个组件的构造函数
const divComponent = Vue.extend({ 

template:`<div v-on:click="click">{ { text } }</div>`,
data() { 

return { 

text: 'hello word'
}
},
methods:{ 

click(){ 

console.log("click")
}
}
})
//调用new方法 实例化组件并挂载dom上
new divComponent().$mount('#app');
//或者直接传入一个el参数来挂载
new divComponent({ 
el:"#app"})

//先定义好toast.vue组件模板 如下
<template>
<div class="container">
<div> { 
 text } </div>
</div>
</template>

//新建toast.js 
import Vue from 'vue';
import toast from './toast.vue'
//创建构造器 将组件放进去
const ToastConstructor =  Vue.extend(toast);
//定一个触发toast显示的方法 并且写好显示的规则、参数等
function showToast(text,duration=2200){ 

const toastDOM = new ToastConstructor({ 

el:document.createElement("div"),
data(){ 

return{ 

text:text
}
}
})
//添加到body中
document.body.appendChild(toastDOM.$el)
//自动消失
setTimeout(()=>{ 

let dom = toastDOM.$el
dom.parentNode.removeChild(dom)
},duration)
}
//按照vue规则，定义全局方法需要暴露一个 install 方法，如default导出为方法则可当做install使用 因此这样写
function toastRegistry(){ 

Vue.prototype.$toast = showToast
}
export default toastRegistry
//最后在main.js中使用Vue.use(toastRegistry)引用即可