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

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

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。