vue的全局提示框组件实例代码
这篇文章给大家介绍一个vue全局提示框组件,具体代码如下所示:
{{message}}
toast.js
importToastComponentfrom'./toast.vue' constToast={}; //注册Toast Toast.install=function(Vue){ //生成一个Vue的子类 //同时这个子类也就是组件 constToastConstructor=Vue.extend(ToastComponent) //生成一个该子类的实例 constinstance=newToastConstructor(); //将这个实例挂载在我创建的div上 //并将此div加入全局挂载点内部 instance.$mount(document.createElement('div')) document.body.appendChild(instance.$el) //通过Vue的原型注册一个方法 //让所有实例共享这个方法 Vue.prototype.$toast=(msg,duration=1500)=>{ instance.message=msg; instance.visible=true; setTimeout(()=>{ instance.visible=false; },duration); } } exportdefaultToast
如何使用?
在main.js中
importVuefrom'vue' importToastfrom'./toast' Vue.use(Toast);
在component中
this.$toast("XXXXXXXXX");
总结
以上所述是小编给大家介绍的vue的全局提示框组件实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!