这篇文章主要介绍了vue的全局提示框组件实例代码,需要的朋友可以参考下
这篇文章给大家介绍一个vue全局提示框组件，具体代码如下所示：
{{message}}
YIXUNCMS中秋专版2.0.4
下载
系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应
toast.js
立即学习“前端免费学习笔记（深入）”；
import ToastComponent from './toast.vue'
const Toast = {};
// 注册Toast
Toast.install = function (Vue) {
// 生成一个Vue的子类
// 同时这个子类也就是组件
const ToastConstructor = Vue.extend(ToastComponent)
// 生成一个该子类的实例
const instance = new ToastConstructor();
// 将这个实例挂载在我创建的p上
// 并将此p加入全局挂载点内部
instance.$mount(document.createElement('p'))
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 build打包之后首页白屏的问题（详细教程）
有关在vue2.0中路由不显示router-view方法（详细教程）
