这篇文章给大家介绍一个vue全局提示框组件,具体代码如下所示:
& lt; template>
& lt; !——全局提示框——比;
& lt; div v-show=翱杉眂lass=癲ialog-tips dialog-center”比;
& lt; div>{{消息}}& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
可见:假的,
消息:“
}；
}
}；
& lt;/script>
& lt;风格lang=皊css”比;
.dialog-tips {
位置:固定;
z - index: 100;
min-width: 220 px;
填充:40 px 22 px;
空白:nowrap;}
background - color: # fff;
不必:0 px 8 px 15 px 0 rgba (0, 0, 0, 0.1);
text-align:中心;
.dialog-tips-icon {
宽度:54 px;
高度:54 px;
@extend % bg-contain;
显示:inline-block;
margin-bottom: 13 px;
}
}
.dialog-center {
上图:50%;
左:50%;
变换:翻译(-50%,-50%)
}
& lt;/style>之前
toast.js
从“进口ToastComponent。/toast.vue '
const面包={};//注册吐司
吐司。安装=function (Vue) {//生成一个Vue的子类//同时这个子类也就是组件
const ToastConstructor=Vue.extend (ToastComponent)//生成一个该子类的实例
const实例=new ToastConstructor ();//将这个实例挂载在我创建的div上//并将此div加入全局挂载点内部
实例。山美元(document.createElement (div))
document.body.appendChild(实例。el美元)//通过Vue的原型注册一个方法//让所有实例共享这个方法
Vue.prototype。$面包=(味精、持续时间=1500)=比;{
实例。消息=味精;
实例。可见=true;
setTimeout(()=比;{
实例。可见=false;
},持续时间);
}
}
出口默认面包
如何使用?
在main.js中
从“Vue”进口Vue
从’。/进口面包烤面包的
Vue.use(面包);
在组件中
美元。烤面包(XXXXXXXXX);
以上所述是小编给大家介绍的vue的全局提示框组件实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
