Element-UI 自定義Notification 通知內容
阿新 • • 發佈:2021-02-01
技術標籤:vue.jsNotification
- 效果
- 標籤內容
showNotify(msg) {
const h = this.$createElement
const _this = this
return this.$notify({
onClose: function () {
_this.msgNotify = ''
_this._getSignMailSingleRead(msg.id)
},
duration: 0,
dangerouslyUseHTMLString: true,
customClass: 'notify-msg',
message: h(
'div',
{
class: 'notify-msg-box',
},
[
h('div', { class: 'notify-msg-top' }, [
h('div', { class: 'notify-msg-icon' }, [
h('div', { class: 'image' }),
]),
h('div', { class: 'notify-msg-top-right' }, [
h('div', { class: 'notify-msg-title' }, msg.title),
h('div', { class: 'notify-msg-context' }, msg.content),
]),
]),
h('div', { class: 'notify-msg-bottom' }, [
h(
'div',
{ class: 'notify-msg-send' },
'傳送者:' + msg.sender_name
),
h(
'div',
{ class: 'notify-msg-time' },
'傳送時間:' + formatStrTime(msg.send_time)
),
]),
]
),
offset: 50, // 向下偏移100
})
},
- CSS樣式
<style lang="scss">
/**
修改notify樣式
*/
.notify-msg {
margin: 0;
padding: 0;
width: 440px;
.el-notification__group {
margin: 0;
padding: 0;
}
}
</style>
<style lang="scss" scoped>
.notify-msg-box {
margin: 0;
padding: 0;
.notify-msg-top {
display: flex;
padding: 30px 30px 30px 20px;
.notify-msg-icon {
.image {
width: 60px;
height: 60px;
background-image: url('assets/icon_notify.png');
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
}
.notify-msg-top-right {
padding-left: 30px;
.notify-msg-title {
font-weight: 700;
font-size: 20px;
color: #333333;
}
.notify-msg-context {
padding-top: 15px;
color: #666666;
font-size: 14px;
}
}
}
.notify-msg-bottom {
display: flex;
height: 50px;
width: 440px;
justify-content: space-between;
align-items: center;
display: flex;
background-color: #f1f1f1;
.notify-msg-send {
padding-left: 15px;
width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notify-msg-time {
text-align: right;
width: 220px;
padding-right: 15px;
}
}
.notify-bottom {
width: 440px;
display: flex;
flex-direction: row-reverse;
.el-button {
margin-bottom: 20px;
margin-right: 30px;
color: white;
font-weight: 700;
width: 100px;
padding-top: 12px;
padding-bottom: 12px;
font-size: 14px;
background-color: #409eff;
}
}
}
</style>