实现的toast组件可以通过this.$toast()调用
需要的知识:
vue.extend();
new Vue().$mount(); //如果mount内没有要挂载的元素vue只会渲染元素而不会加载的界面上
toast.vue的内容
<!--template的内容-->
<template>
<div>
<slot>{{message}}</slot>
</div>
</template>
//script的内容
export default {
name: 'toast',
data(){
return {
duration: 1500, //默认toast消失的时间
message: '', //toast显示的内容
}
},
mounted(){
setTimeout(()=>{
this.$destroy(true);
this.$el.parentNode.removeChild(this.$el);
}, this.duration)
}
}
toast.js的内容
import Vue from 'vue';
import toast from './toast.vue';
let ToastConstructor = Vue.extend(Toast);
let instance;
let instances = [];
const Toast = function(options) {
if (Vue.prototype.$isServer) return;
options = options || {};
if (typeof options === 'string') {
options = {
message: options
};
}
instance = new ToastConstructor({
data: options
});
instance.id = id;
instance.$slots.default = [instance.message];
instance.message = null;
instance.vm = instance.$mount();
document.body.appendChild(instance.vm.$el);
instance.vm.visible = true;
instance.dom = instance.vm.$el;
instances.push(instance);
return instance.vm;
};
export default Toast;