0
点赞
收藏
分享

微信扫一扫

elementui notification 动态内容时事件问题

	  num: 0,
      notiList: {},

// 只搜到了纯 html 或者 利用 this.$createElement ,没办法,直接使用 Jquery 吧,毕竟项目也引入了 jquery
notify(msg) {
      console.log(msg)
      const that = this
      const noti = this.$notify({
        position: 'bottom-right',
        customClass: 'custom-notification',
        iconClass: 'el-icon-message-solid',
        dangerouslyUseHTMLString: true,
        title: '消息' + (this.num + 1),
        message:
          `1. <a href="/myIndex">本地跳转</a><br>
          2.<a href="/index" target="_blank">新标签页</a><br>
          3.<a href="https://www.baidu.com" target="_blank">外网链接</a><br>` +
          // <span class="check-box mr10"><label class="el-checkbox"><span class="el-checkbox__input"><span class="el-checkbox__inner"></span></span>
          // <span class="el-checkbox__label">不再弹出</span></label></span>
          `<div class="footer" data-id="${this.num}">
            <button class="el-button el-button--text el-button--small close-btn">知晓</button>
          </div>`, // 没法实现点击事件的绑定
        duration: 0,
        onClose: () => {
          console.log('read')
        },
      })
      this.notiList[this.num++] = noti
      // 绑定 关闭按钮事件
      this.bindElEvent(
        '.custom-notification.el-notification .footer > .close-btn',
        'click',
        me => {
          const id = $(me).parent().attr('data-id')
          console.log(that.notiList, id)
          that.notiList[id].close()
          const neverNoti = $(me)
            .parent()
            .find('.check-box')
            .hasClass('is-checked')
          if (neverNoti) {
            delete that.notiList[id]
          }
        }
      )
      // 绑定 checkbox 事件
      /*this.bindElEvent(
        '.custom-notification.el-notification .footer > .check-box',
        'click',
        me => {
          if ($(me).hasClass('is-checked')) {
            $(me).removeClass('is-checked')
            $(me).find('.el-checkbox').removeClass('is-checked')
            $(me).find('.el-checkbox__input').removeClass('is-checked')
          } else {
            $(me).addClass('is-checked')
            $(me).find('.el-checkbox').addClass('is-checked')
            $(me).find('.el-checkbox__input').addClass('is-checked')
          }
        }
      )*/
    },
    bindElEvent(className, eventName, fn) {
      const clickEl = $(className)
      clickEl.off(eventName)
      clickEl.on(eventName, function () {
        fn(this)
      })
    },



<style lang="scss">
.el-notification.custom-notification {
  background-color: #f9fafb;
  .el-notification__icon {
    color: #409eff;
  }
  .el-notification__group {
    width: 100%;
  }
  .footer {
    text-align: right;
    .el-checkbox__label {
      padding-left: 0;
    }
  }
}
</style>


举报

相关推荐

0 条评论