浅谈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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • ElementUI的this.$notify.close()调用不起作用的解决

    ElementUI的this.$notify.close()调用不起作用的解决

    目录 需求描述 问题描述 问题分析 问题解决 问题拓展 需求描述 项目首先要用户选择某个问题,选择之后使用ElementUI的Notification组件提示用户正在对文件格式进行检查(需要先提交给后端,交给后端检查,再返回结果给前端).如果格式检查无误,则关闭Notification,弹出一个MessageBox(也是ElementUI的组件),告知用户上传文件之后不可撤销. 问题描述 在检查文件格式是否正确之后,需要手动调用相关函数,把Notification去掉.根据官方文档,使用this

  • Vue 解决在element中使用$notify在提示信息中换行问题

    在项目开发过程中,遇到如下用户体验提升需求:需要实现错误提示时根据后台返回错误列表信息,换行展示. 实现方式如下: 通过F12元素查看,在对应的样式中加入white-space:pre-wrap,该样式的主要作用是识别字符串中的换行符"\n",故需要在待展示的信息字符串中加入相应的换行标识符. 在$notify消息提示中,作用于el-notification: .el-notification {white-space:pre-wrap !important; } 有的童鞋可能试过样式

  • 浅谈element的$notify注意点

    浅谈element的$notify注意点

    我的初衷是把element-ui的$notify通知封装成一个组件,登录成功后调用获取低库存接口,如果获取接口的列表当中库存大于0,则显示这个通知,并且在文本当中提供点击事件. 因此,首先想到的就是使用dangerouslyUseHTMLString属性,可以插入html字符串 export default { methods: { open12() { this.$notify({ title: 'HTML 片段', dangerouslyUseHTMLString: true, messag

  • 浅谈element中InfiniteScroll按需引入的一点注意事项

    大家为了节省空间,常常进行按需引入来节省空间,这里我给大家来介绍一下element中按需引入无限滚动指令注意的事项. 针对前面element 按需引入的一些配置这里就不再详细介绍了. 那么这里讲的是在main.js写入以下代码. import { InfiniteScroll } from 'element-ui'; Vue.use(InfiniteScroll) 好,这样引入.注册了,那么我们接下来做得事情就是在页面使用它. <template> <ul class="inf

  • 浅谈element关于table拖拽排序问题

    最近在使用element table的时候,经常会遇到排序的问题,如果只是简单的排序的话,element官方已经给出了指定的方法 //table的默认排序方式是按ID排序 顺序为递减 这里可以改成其它 比如 order <el-table :data="tableData" :default-sort="{prop: 'ID', order: 'descending'}"> //设置sortable属性时出现排序按钮 <el-table-colum

  • 浅谈Java线程间通信之wait/notify

    浅谈Java线程间通信之wait/notify

    Java中的wait/notify/notifyAll可用来实现线程间通信,是Object类的方法,这三个方法都是native方法,是平台相关的,常用来实现生产者/消费者模式.先来我们来看下相关定义: wait() :调用该方法的线程进入WATTING状态,只有等待另外线程的通知或中断才会返回,调用wait()方法后,会释放对象的锁. wait(long):超时等待最多long毫秒,如果没有通知就超时返回. notify() :通知一个在对象上等待的线程,使其从wait()方法返回,而返回的前提

  • 浅谈jQuery中的eq()与DOM中element.[]的区别

    如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a class="a">#1</a> <a class="a">#2</a>

  • 浅谈线程通信wait，notify作用

    浅谈线程通信wait，notify作用

    线程通信的目的是为了能够让线程之间相互发送信号.另外,线程通信还能够使得线程等待其它线程的信号,比如,线程B可以等待线程A的信号,这个信号可以是线程A已经处理完成的信号 Wait()方法 -中断方法的执行,使本线程等待,暂时让出cpu的使用权,并允许其他线程使用这个同步方法 Notify()方法 -唤醒由于使用这个同步方而处于等待线程的某一个结束等待 Notifyall()方法 唤醒所有由于使用这个同步方法而处于等待的线程结束等待 什么时候使用wait方法 当一个线程使用的同步方法中用到某个变量

  • 浅谈Vue Element中Select下拉框选取值的问题

    之前写了.一个原生的select的,因为展示效果原因,给删除掉了,忘记保存代码了,现在大家展示使用elementUI的下拉框封装一个组件,供咱们项目中经常调用,减少代码量. html: <el-select v-model="ite" placeholder="请选择" value-key="mateGroup"> <el-option style="width: auto" :disabled="

  • 浅谈XML Schema中的elementFormDefault属性

    elementFormDefault属性与命名空间相关,其值可设置为qualified或unqualified 如果设置为qualified: 在XML文档中使用局部元素时,必须使用限定短名作为前缀 sean.xsd: <?xml version="1.0" encoding="UTF-8"?> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:sean=&

  • 浅谈Angular中ngModel的$render

    浅谈Angular中ngModel的$render

    在我开始着手ngModel的领域时候,有一个问题很令我纠结,那就是$render()到底是做什么的呢?查了很多资料都只是简单的描述一下,这就令我很纠结了,终于在一个阳光明媚的晚上,我终于解决了这个大问题 那么这个$render方法到底是干什么的呢?他的用处就是在$viewValue改变的时候可以重新绑定model数据,但是我们要注意一点($viewValue和DOM节点的value是不同的),我觉得他们的区别有点类似setTimeout和$timeout的区别,但是又不太一样.ps:其实mode

  • 浅谈多线程_让程序更高效的运行

    浅谈多线程_让程序更高效的运行

    Java Thread 的一些认识: Java是抢占式线程,一个线程就是进程中单一的顺序控制流,单个进程可以拥有多个并发任务,其底层是切分CPU时间,多线程和多任务往往是使用多处理器系统的最合理方式 进程可以看作一个程序或者一个应用:线程是进程中执行的一个任务,多个线程可以共享资源 一个Java 应用从main 方法开始运行,main 运行在一个线程内,也被称为 "主线程",Runnable也可以理解为Task (任务) JVM启动后,会创建一些守护线程来进行自身的常规管理(垃圾回收,

随机推荐