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
        })
      }
    }