elMessage.js
javascriptimport {Message} from 'element-ui' const tipsEvent=(options)=>{ console.log(document.querySelectorAll('.el-message')); const dom=document.querySelectorAll('.el-message')[0] if(dom==undefined){ Message(options) } } const typeList=['success','error','info','warning'] typeList.forEach(item=>{ tipsEvent[item]=options=>{ const ele=document.querySelectorAll('.el-message')[0] if(ele==undefined){ Message[item](options) } } }) export const tips=tipsEvent
main.js中全局挂载
javascriptimport Vue from 'vue' import {tips} from '@/utils/elMessage.js' Vue.prototype.$message=tips;//在这里建议取相同的名称,因为是为了覆盖框架默认的this.$message
index.vue中使用
javascript<script> export default { name: 'index', methods: { handleTap(){ this.$message({ type:'warning', message:'警告提示触发了' }) } } } </script>
优化elementUI的Message消息提示连续触发,满屏显示问题
路光.2023-11-15 1:05
相关推荐
22x艾克斯7 分钟前
Web Notifications API-让网页也能像QQ一样实现消息通知X 西安9 分钟前
第十章JavaScript的应用想你的风吹到了瑞士15 分钟前
变量提升&函数提升生椰拿铁You27 分钟前
12 —— Webpack中向前端注入环境变量Huazzi.1 小时前
免费好用的静态网页托管平台全面对比介绍吃土少女古拉拉1 小时前
前端和后端夫琅禾费米线1 小时前
leetcode2650. 设计可取消函数 generator和Promise寒雒2 小时前
【Python】实战:实现GUI登录界面独上归州2 小时前
Vue与React的Suspense组件对比战族狼魂2 小时前
html+js实现图片的放大缩小等比缩放翻转,自动播放切换,顺逆时针旋转