Element-UI 自定义Notification 通知内容

效果

标签内容

showNotify(msg) {const h = this.$createElementconst _this = thisreturn 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>

Element-UI 自定义Notification 通知内容相关推荐

Element UI 自定义日历
Element UI 自定义日历代码示例 HTML部分 <template><el-calendar ref="calendar"><templat ...
Element UI 自定义穿梭框的数据项
文章目录需求官网说明实现效果具体步骤附加需求:调节穿梭框高宽度需求穿梭框中显示的内容是包含多个字段的数据(把表格的几个字段在穿梭框中展示)以及修改相应的样式,查看 Element UI ...
Element UI 自定义动态换肤（主题）
需求背景:项目需要支持动态换主题,主题色可以随意选择(即用户想用什么颜色的主题就用什么颜色的主题):而element官网给的自定义主题只能是项目里写死,无法实现用户动态切换: 方式一:调接口加载C ...
element ui表格标题及内容居中
场景: 在开发的时候,经常会用到element-ui表格功能,开发后,发现表格内容及标题没有对齐,看起来不太美观,就这个问题浅浅记录一下表头使用[一行内码搞定] <el-table:data= ...
element ui 输入框不能输入内容
原先代码 addUserForm只是一个空对象 <el-form:model="addUserForm":rules="a ...
Element UI自定义表单验证公共提取
2019独角兽企业重金招聘Python工程师标准>>> 主要代码: util文件夹下validate.js 文件 export const VDT = {messages:{requ ...
vue使用element ui自定义手机验证规则
1.表单的一项 <el-form-item label="电话" prop="senderPhone"><el-input v-model=& ...
浅谈Element Ui自定义日历
官方写法 <el-calendar><templateslot=" ...
使用element UI 验证时vaild总是false
记录一下前面是一个element ui自定义表单验证规则,就是向后端发ajax请求,验证旧密码正不正确后面: // axios请求,修改密码 const { status, message } = ...

Element-UI 自定义Notification 通知内容

Element-UI 自定义Notification 通知内容相关推荐

最新文章

热门文章