vue的全局提示框组件实例代码
程序员文章站
2022-07-08 09:03:36
这篇文章给大家介绍一个vue全局提示框组件，具体代码如下所示：
<...
这篇文章给大家介绍一个vue全局提示框组件，具体代码如下所示：
<template>
<!-- 全局提示框 -->
<div v-show="visible" class="dialog-tips dialog-center">
<div>{{message}}</div>
</div>
</template>
<script>
export default {
data() {
return {
visible: false,
message: ""
};
}
};
</script>
<style lang="scss">
.dialog-tips{
position: fixed;
z-index: 100;
min-width: 220px;
padding: 40px 22px;
white-space: nowrap;
background-color: #fff;
box-shadow: 0px 8px 15px 0 rgba(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%)
}
</style>
toast.js
import toastcomponent from './toast.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, duration = 1500) => {
instance.message = msg;
instance.visible = true;
settimeout(() => {
instance.visible = false;
}, duration);
}
}
export default toast
如何使用？
在main.js中
import vue from 'vue' import toast from './toast' vue.use(toast);
在component中
this.$toast("xxxxxxxxx");
总结
以上所述是小编给大家介绍的vue的全局提示框组件实例代码，希望对大家有所帮助