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

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

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