ant design vue notification

Posted 2021-06-17 彪悍的代码不需要注释

通知提醒框

 

/**
 * 
 * @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 = []
        }
      })
    },