浅谈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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文章通过实现一个vue-dialog的弹出层组件，然后附加说明如果发布此包到npm，且能被其他项目使用。本文给大家介绍的非常详细，需要的的朋友参考下2017-03-03
这篇文章主要介绍了Vue实现双向绑定的方法，了解vue的双向数据绑定原理以及核心代码模块，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
实现小游戏可以锻炼自己的逻辑思维能力，也不会很枯燥，完成时会给自己带来一种满足感。本文就将利用Vue和JS实现简单的扫雷小游戏，需要的可以参考一下2022-06-06
本文主要介绍了element前端实现压缩图片的功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
m3u8是一种基于HTTP Live Streaming（HLS）文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成,下面这篇文章主要给大家介绍了关于vue3使用videojs播放m3u8格式视频的相关资料,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Vue.js 2.0从基础到组件的相关资料，文中介绍的非常详细，对大家学习或者使用vue.js具有一定的参考价值，需要的朋友可以参考学习，下面来一起看看吧。2017-04-04
最近公司开发一个项目,采用的前后端分离的方式,前端采用vue,但是再项目开发过程中遇到一个比较麻烦的问题,下面这篇文章主要给大家介绍了关于vue ui的安装步骤以及使用的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue脚手架及vue-router基本使用，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-04-04
在一般业务中监听的最多的就是 Click 事件，但是在一些业务比如 Alert 和 Pop 效果时，需要监听在元素外部的点击来关闭弹窗。2020-11-11
这篇文章主要给大家介绍了关于el-tab设置默认激活的标签页实现步骤,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
最新评论