本文主要是介绍vue3使用Notification 通知如何自定义样式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
需求： vue3使用Notification，通过接口拿到了定义好的消息提示的末班背景色，标题背景色，标题颜色，内容颜色信息，需要根据返回的这些颜色值设置到Notification的弹出模板层上面
首先Notification的定义方法在js文件中进行定义的，需要在js文件中引入一个scss文件，用来定义Notification的样式
//js文件中的部分代码：
//首先引入定义好的scss文件
import '@/common/msg.scss'
//然后在请求的接口中做相应的处理
http.xxx.post().then(res=>{let data = res.data || []// 设置样式在scss文件中用到的变量document.documentElement.style.setProperty('--bg-color', '#fff')document.documentElement.style.setProperty('--content-color', '#000000')document.documentElement.style.setProperty('--titleBg-color', '#fff')document.documentElement.style.setProperty('--title-color', '#000000')ElNotification({title: 'Custom Position',message: "I'm at the bottom right corner",position: 'bottom-right',customClass: 'msgClass',//自定义样式属性style: {background: '#fff' //自定义样式，可以直接设置背景色}})})}
在scss文件中需要写相应的样式
.msgClass{padding: 0px;.el-notification__group{width: 100%}.el-notification__icon{color: var(--title-color);}.el-notification__title{color: var(--title-color);}}...
这篇关于vue3使用Notification 通知如何自定义样式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
