浅谈element的$notify注意点
更新时间：2021年08月11日 15:17:21 作者：chiuwingyan
本文主要介绍了element的$notify注意点，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
我的初衷是把element-ui的$notify通知封装成一个组件，登录成功后调用获取低库存接口，如果获取接口的列表当中库存大于0，则显示这个通知，并且在文本当中提供点击事件。
因此，首先想到的就是使用dangerouslyUseHTMLString属性，可以插入html字符串
export default {
methods: {
open12() {
this.$notify({
title: 'HTML 片段',
dangerouslyUseHTMLString: true,
message: '<strong>这是 <i id="show">HTML</i> 片段</strong>'
});
}
}
}
但是，message里面的html字符串其实是脱离了vue，例如不能用@click方法绑定事件，因此，应该用js的操作dom来绑定。
首先，我想到的是在该组件的mounted方法里面获取
document.querySelector('#show');
但是这样获取到的是null，为什么呢？
mounted的时候是该组件模板里面的dom挂载完毕，然而我这个组件里面并没有模板，只在方法里使用了this.$notify，挂载完后这个notify并不在app里面，
role=“alert”就是该通知框，因此我们不能把它当做普通组件操作。而且，它的挂载时机有可能在该组件的mounted之后，就是mouted方法时只是该组件挂载了，但是里面的这个motify可能还没有，因此就是null。
如果要在里面添加js方法如绑定事件，应该要在html里面添加监听，但是要掌握好时机。
我这里还是不使用notify了，因为notify应该是偏向于文本展示的通知类，我这里使用notify可能就会有点不妥。
到此这篇关于浅谈element的$notify注意点的文章就介绍到这了,更多相关element $notify内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
webpack提供的反向代理服务器在开发阶段非常方便，几行简单的代码配置就可以使用反向代理功能，包括路径重写、cookie处理等。这篇文章主要介绍了vue webpack重写cookie路径,需要的朋友可以参考下2019-07-07
VUE的history模式下除了index外其他路由404报错解决办法
在本篇文章里小编给大家分享的是关于VUE的history模式下除了index外其他路由404报错解决办法，对此有需要的朋友们可以学习下。2019-08-08
这篇文章主要介绍了vue3+three.js实现疫情可视化,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
这篇文章主要为大家详细介绍了vue2.0多条件搜索组件的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要为大家详细介绍了Vue项目之学生管理系统实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
本篇文章主要介绍了详解如何在vue中使用sass，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
vue导出excel和echart图形分别在不同工作表的实现方法
这篇文章主要给大家介绍了如何使用vue实现导出excel和echart图形分别在不同工作表,文中有详细的代码示例供大家参考,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了vue组件父子间通信的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
element ui watch el-input赋值之后无法删除或修改问题
这篇文章主要介绍了element ui watch el-input赋值之后无法删除或修改问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要为大家介绍了tdesign vue初始化组件源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最新评论