ant design vue notification

• Z时代
• 2024-01-10
• 分类：综合

通知提醒框

/**
 * 
 * @param {error,success,warning,warn,info,open} type 
 * @param {消息頭} message 
 * @param {消息内容} description 
 * @param {超時時間，默認4.5S，單位：秒} duration 
 */
let openNotification = (type, message, description, duration = 80) => {
    // const key = `open${Date.now()}`;
notification[type]({
        duration: duration,
        message: message,
        description:
            (h) => {
                return h('p', {
                    domProps: {
                        innerHTML: description
                    },
                })
            },
        // onClose: close,
        // btn: h => {
        //     return h(
        //         'a-button',
        //         {
        //             props: {
        //                 type: 'primary',
        //                 size: 'small',
        //             },
        //             on: {
        //                 click: () => notification.close(key),
        //             },
        //         },
        //         'Confirm',
        //     );
        // },
        // key,
    });
}

  // 展示最新的一条推送消息
    showSingleMessage () {
      const h = this.$createElement
      const that = this
      if (!this.noPushMessageList || this.noPushMessageList.length <= 0) {
        return
      }
      const item = that.noPushMessageList[0] || {}
      this.$notification.open({
        key: this.messagekey,
        message: `您有${that.noPushMessageList.length}条新消息`,
        duration: 0,
        placement: 'bottomRight',
        description: h('div', null, [
          h('p', null, [h('span', null, `${item.messageTitle},`)]),
          h('p', null, [
            h('span', null, `${item.messageContent},`),
            h(
              'a',
              {
                on: {
                  click: () => {
                    that.toProjectByItem(item, 1)
                  }
                }
              },
              '点击查看'
            )
          ]),
          h('p', null, [
            h('span', null, '客户名称 '),
            h(
              'span',
              {
                on: {}
              },
              item.customerName
            )
          ]),
          h('p', null, [h('span', null, item.releaseTime)])
        ]),
        btn: h => {
          return h(
            'a-button',
            {
              props: {
                type: 'primary',
                size: 'small'
              },
              on: {
                click: async () => {
                  that.$notification.close(this.messagekey)
                  const index = this.getArrayIndex(this.noPushMessageList, item)
                  this.noPushMessageList.splice(index, 1) // 删除当前一条
                  that.showSingleMessage()
                }
              }
            },
            '下一条'
          )
        },
        // 关闭所有未推送消息弹窗
        onClose: () => {
          this.$notification.close(this.messagekey)
          this.noPushMessageList = []
        }
      })
    },

以上是 ant design vue notification 的全部内容， 来源链接： utcz.com/z/380354.html