Element的Notification通知自定义样式手动关闭直接渲染带html格式的字符串

效果图：

功能点1：弹窗需要自定义样式，例如实现滚动条展示多条数据

答：其实简单的自定义样式可以使用官网提供的：message 属性支持传入 HTML 片段

不过我用的是 createElement，这个的使用方法具体用法可以参考这篇博客：

[Vue]createElement参数 - vickylinj - 博客园

功能点2：渲染数据的时候不能，挤在一起，而要能将数组里的数据换行显示

答：后端返回的数据是一个数组类型，所以我需要将数组遍历出来加上换行符号</br>,所以这里要用到createElement的DOM属性

功能点3：要能区分弹窗是自动关闭的？还是手动点击按钮关闭的？

答：因为就算手动调用弹窗的关闭方法，一样会执行onClose的关闭回调，所以压根没法区分是点击了X关闭按钮还是我弹窗自己定时关闭的。所以我是将弹窗的关闭按钮隐藏，自己画了一个上去，然后监听这个的点击事件

代码：写的有点乱，将就看吧哈哈哈哈哈


// 在data中定义个弹窗实例
data () {return {instance: null // 通知弹窗实例}}---------------------------------------------------------------------------------this.instance = this.$notify({dangerouslyUseHTMLString: true,showClose: false, // 关闭自带的关闭按钮duration: 0, position: 'bottom-right',customClass: 'notifyClass',// 这个样式只能放在无scoped的style中才能生效message: this.$createElement('div',{},[this.$createElement('div',{ class: 'notify_div' },[this.$createElement('div',{ class: 'notify_title' },[this.$createElement('i',{ class: 'el-icon-bell notifyIcon' }),this.$createElement('span',{},'通知')]),this.$createElement('i',{ class: 'el-icon-close', on: { click: this.closeNotify } })]),this.$createElement('div',{domProps: {innerHTML: htmlString // htmlString就是带HTML格式的字符串'<em>你好啊</em>'},class: 'notifyContent'})])})
----------------------------------------------------------------------------------------closeNotify () {this.instance.close() // 手动关闭通知}----------------------------------------------------------------------
.notifyClass {background-color: #fdf6ec;
}
.notify_title {margin-bottom: 5px;font-weight: bold;
}
.notifyContent {color: #f75343;height: 100px;overflow-y: auto;padding-right: 6px;&::-webkit-scrollbar {width: 5px;height: 7px;background-color: #fff;}&::-webkit-scrollbar-track {border-radius: 10px;background-color: #fff;}&::-webkit-scrollbar-thumb {height: 20px;border-radius: 10px;background-color: #cccdd1;}
}
.notifyIcon {color: #f75343;margin-right: 5px;
}
.notify_div {display: flex;justify-content: space-between;
}

Element的Notification通知自定义样式手动关闭直接渲染带html格式的字符串相关推荐

利用element显示Notification通知，复制提醒，禁用F12或右键菜单提醒
大家在设定网站提示消息时,非常推荐这个element显示Notification通知功能. 使用方法: 一.引入cdn资源  <script src=&q ...
element ui table show-overflow-tooltip自定义样式
element ui table show-overflow-tooltip自定义样式在使用element ui table 组件时,表格td内容太多可设置show-overflow-tooltip ...
原生html使用element组件,使用element-ui的table组件时，渲染为html格式
背景今天在做vue的项目时,使用到 element-ui 的 table 组件,使用富文本编辑器进行新增操作后,发现 html格式并没有被识别原因在 element-ui 中,table组件默 ...
【黑马Android】(11）音乐播放器/视频播放器/照相机/常见对话框/notification通知/样式和主题/帧动画/传感器/应用程序反编译与安装
音乐播放器api <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns: ...
适配通知 Notification 通知渠道前台服务 MD
Markdown版本笔记我的GitHub首页我的博客我的微信我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
Android的notification通知
概括: Android使用notification实现消息提醒,提供通知栏和通知抽屉查看通知和通知详情,Android的notification机制应用非常广泛,是指在应用程序之外显示的消息,布局由系 ...
u盘自动打开html,如何快速禁用U盘自动弹出(播放)功能无需手动关闭弹出窗口
如何快速禁用U盘自动弹出(播放)功能无需手动关闭弹出窗口发布时间:2013-08-26 17:04:27 作者:佚名我要评论移动硬盘分了N个区的时候需要手动一个一个的关掉自动播放窗口,真 ...
android自定义通知栏样式,Android 通知栏自定义样式
8.0系统的通知栏适配在8.0之前我们通知栏的使用:notification = new NotificationCompat.Builder(mContext) .setWhen(System.c ...
Android学习|控件——Notification通知
Android学习|控件--Notification通知一.前提二.两个对象的的构建 1.创建NotificationManager 2.使用Builder构造器来创建Notification 2 ...

Element的Notification通知自定义样式手动关闭直接渲染带html格式的字符串

Element的Notification通知自定义样式手动关闭直接渲染带html格式的字符串相关推荐

最新文章

热门文章