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

文章名称：vue的全局提示框组件实例代码
链接地址：http://scyanting.com/article/jgispo.html

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

其他资讯