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