zoukankan      html  css  js  c++  java
  • elementUI【notify】一个事件中多次调用通知,会发生通知重叠 吴小明

    1、正常情况下,在一次事件中调用多次通知,会出现重叠

    DOM

        <el-button type="primary" plain @click="doNotify">弹出通知叠加</el-button>

    js

        doNotify() {
          for (let i = 0; i < 3; i++) {
            this.$notify({
              title: '我的通知呀',
              message: '左下角弹出的消息',
              position: 'bottom-left'
            })
          }
        }

    2、使用promise解决这个问题

    DOM

        <el-button type="success" plain @click="usePromise">promise弹出不叠加的通知</el-button>

    js

        usePromise() {
          for (let i = 0; i < 3; i++) {
            this.notifyPromise = this.notifyPromise.then(() => {
              this.$notify({
                type: 'info',
                title: '自定义位置',
                message: '右下角弹出的消息 - 使用 Promise 解决',
                position: 'bottom-right'
              })
            })
          }
        }

    3、使用setTimeout解决这个问题

    DOM

        <el-button type="success" plain @click="useSetTimeout">setTimeout弹出不叠加的通知</el-button>

    js

        useSetTimeout() {
          for (let i = 0; i < 3; i++) {
            this.timer = window.setTimeout(() => {
              this.$notify({
                type: 'success',
                title: '自定义位置',
                message: '右下角弹出的消息 - 使用 setTimeout 解决',
                position: 'bottom-right'
              })
            }, 0)
            this.$once('hook:beforeDestroy', () => {
              clearInterval(timer)
              timer = null
            })
          }
        }

  • 相关阅读:
    Java操作数据库——使用JDBC连接数据库
    MySQL入门——Linux下安装后的配置文件
    Linux上搭建SVN服务
    PHP包管理工具composer
    收藏博文
    Linux上软件安装
    nginx配置详解
    Linux文本编辑器Vim使用
    Linux常用命令整理
    Linux增加swap空间
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15753740.html
Copyright © 2011-2022 走看看