需求: 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);
}
}
...