组件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;
本文来自博客园,作者:_zhiqiu,转载请注明原文链接:https://www.cnblogs.com/guojikun/p/10767614.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战