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>