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

发布时间:2021-04-29 发布网站:https://www.cnblogs.com/guojikun
前端之家收集整理的这篇文章主要介绍了组件toast(类似于element-ui的message组件)的实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

实现的toast组件可以通过this.$toast()调用

需要的知识:

vue.extend();

new Vue().$mount(); //如果mount内没有要挂载的元素vue只会渲染元素而不会加载的界面上

toast.vue的内容

<!--template的内容-->
<template>
    div>
        slot>{{message}}</>
>

 

//script的内容
export default {
    name: 'toast',data(){
        return {
            duration: 1500,默认toast消失的时间
            message: '',1)">toast显示的内容
        }
    },mounted(){
        setTimeout(()=>{
            this.$destroy(true);
            this.$el.parentNode.removeChild(this.$el);
        },.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) ;
    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 = ;
    instance.dom = instance.vm.$el;
    instances.push(instance);
     instance.vm;
};

export default Toast;

 

总结


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

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。