组件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;
复制代码

 

posted @   _zhiqiu  阅读(4132)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示