zoukankan      html  css  js  c++  java
  • ant design vue notification

    通知提醒框

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

      

    彪悍的人生不需要解释,彪悍的代码不需要注释。
  • 相关阅读:
    Python 通过最低位判断数字是偶数还是奇数
    C语言 windows下Ansi和UTF-8编码格式的转换
    C语言 Ubuntu系统 UTF-8 文字处理
    C语言 使用char字符实现汉字处理
    C# GUI应用 实现 2048游戏
    Docker部署Minio
    Ubuntu18.04开启root
    Ubuntu18.04安装Docker
    docker安装mysql
    idea启动项目端口被占用
  • 原文地址:https://www.cnblogs.com/ingstyle/p/14897017.html
Copyright © 2011-2022 走看看