0
点赞
收藏
分享

微信扫一扫

组件toast(类似于element-ui的message组件)的实现

实现的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;

 



举报

相关推荐

0 条评论