• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

浅谈element的$notify注意点

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

我的初衷是把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内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
ElementUI的this.$notify.close()调用不起作用的解决发布时间:2022-02-05
下一篇:
JavaScript基础入门之错误捕获机制发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap