【Element】通知 Notification

ElementUI

弹出通知

created() {
  const h = this.$createElement
  const that = this
  this.$notify({
    onClose: function () {
      that.do()
    },
    type: 'warning',
    duration: 5000, // 5秒后隐藏
    offset: 0, // 距离顶部
    dangerouslyUseHTMLString: false, 
    showClose: false,
    customClass: 'notify-msg',
    message: h(
      'div', { class: 'notify-msg-box', },
      [
        h('div', { class: 'notify-msg-top' }, [
          h('div', { class: 'notify-msg-title' }, '标题标题'),
          h('div', { class: 'notify-msg-time' }, '2022-22-21 12:12:12'),
        ]),
        h('div', { class: 'notify-msg-content' }, '内容内容'),
      ]
    )
  })
}

 

created() {
  let str = ``
  let list = [1, 2, 3, 4]
  list.forEach((v) => {
    str += `
      

            

              
标题标题
              
2022-22-21 12:12:12
            
            
内容内容
      
`
  })

  this.$notify({
    type: 'warning',
    duration: 5000,
    offset: 0,
    dangerouslyUseHTMLString: true,
    showClose: true,
    customClass: 'notify-msg',
    message: str
  })
}

created() {
  let list = [1,2,3,4]
  list.forEach((v) => {
    this.$notify({
      type: 'warning',
      duration: 5000,
      offset: 10,
      dangerouslyUseHTMLString: true,
      showClose: true,
      customClass: 'notify-msg',
      message: `
        

          

            
标题标题
            
2022-22-21 12:12:12
          
          
内容内容
        
`
    })
  })
}

解决

data() {
  return {
    notifyPromise: Promise.resolve()
  }
},
created() {
  let list = [1,2,3,4]
  list.forEach((v) => {
    let msg = `

              

                
标题标题
                
2022-22-21 12:12:12
              
              
内容内容
            
`
    this.notify(msg)
  })
},
notify(msg) {
  this.notifyPromise = this.notifyPromise.then(this.$nextTick).then(() => {
    this.$notify({
      type: 'warning',
      duration: 5000,
      // offset: 0,
      dangerouslyUseHTMLString: true,
      showClose: true,
      customClass: 'notify-msg',
      message: msg
    })
  })
}