Vue全局弹窗组件
想要实现函数式调用,不能用Vue.component()注册
需要写一个js文件,一个 vue文件
-------------------------分割线-----------------------------------------------
首先是js文件:
import ToastComponent from './index.vue'
import router from '@/router'
const Toast = {};
// 注册Toast
Toast.install = function(Vue) {
const ToastConstructor = Vue.extend(ToastComponent)
//new出来的元素,是不在根元素下的,需要手动添加路由,否则如果需要路由跳转,是没办法实现的,这里很重要
const instance = new ToastConstructor({ router });
instance.$mount()
document.body.appendChild(instance.$el)
/**
* msg:提示小时
* flag:true 展示,false隐藏
id:需要传递参数的话,在这里定义
* */
Vue.prototype.$toast = (msg, flag, id, duration = 1500) => {
instance.message = msg;
instance.visible = flag;
insta