微客导航 » 文章资讯 » vue的全局提示框组件实例代码

vue的全局提示框组件实例代码

2023-09-16 02:06:05 297

这篇文章给大家介绍一个vue全局提示框组件，具体代码如下所示：




.dialog-tips{
position:fixed;
z-index:100;
min-width:220px;
padding:40px22px;
white-space:nowrap;
background-color:#fff;
box-shadow:0px8px15px0rgba(0,0,0,0.1);
text-align:center;
.dialog-tips-icon{
width:54px;
height:54px;
@extend%bg-contain;
display:inline-block;
margin-bottom:13px;
}
}
.dialog-center{
top:50%;
left:50%;
transform:translate(-50%,-50%)
}

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的全局提示框组件实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

vue的全局提示框组件实例代码

热门推荐

随机推荐