组件toast(类似于element-ui的message组件)的实现
发布时间:2020-12-14 01:31:46 所属栏目:Linux 来源:网络整理
导读:实现的toast组件可以通过this.$toast()调用 需要的知识: vue.extend(); new Vue().$mount(); //如果mount内没有要挂载的元素vue只会渲染元素而不会加载的界面上 toast.vue的内容 !-- template的内容 -- template div slot {{message}} / slot / div / templ
实现的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; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |