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

概述实现的toast组件可以通过this.$toast()调用 需要的知识： vue.extend(); new Vue().$mount(); //如果mount内没有要挂载的元素vue只会渲染元素而不会加载的界面上 toast.vue的内容 <!--template的内容--><template> <div> <slot>{{message}}</slot>

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

总结

以上是内存溢出为你收集整理的组件toast(类似于element-ui的message组件)的实现全部内容，希望文章能够帮你解决组件toast(类似于element-ui的message组件)的实现所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。