element-UI消息弹框$notify的样式修改问题
需求:
发消息页面发送成功或者后进行消息弹出提示
解决:使用element-ui的Notification 通知组件
this.post(
'~~~~',
data,
(data) => {
if (data.success == 'true') {
// this.$message.success('您的消息已发送成功')
this.$notify({
title: '成功',
message: '发送成功',
dangerouslyUseHTMLString: true,
type: 'success',
});
// 重置页面数据
this.addArr = []
this.title = ''
this.addressee = []
this.content = ''
this.time1 = ''
this.time2 = ''
// delCookie(this.errorSendMessage.id) // 发送成功的消息需要进行删除cookie
}
但是显示的是这样的
修改样式
步骤一:customClass:'notify-success' 添加customClass属性覆盖原有样式
this.$notify({
title: '成功',
message: '发送成功',
dangerouslyUseHTMLString: true,
type: 'success',
customClass:'notify-success'
});
步骤二:在全局进行书写css样式(全局是重点)
为什么是全局?
因为添加的消息弹层div不在当前组件下面,也不在APP.vue的div下面,它的div标签和app.vue平级
实现:在当前的发消息的vue组件页面加入style,但是不要加scoped属性,用!important进行加权
<style>
.notify-success{
top: 1.7rem !important;
right: 0.32rem !important;
width: 2rem !important;
height: 0.96rem !important;
background: rgba(131, 213, 134, 0.1) !important;
border-radius: 0.04rem 0px 0px 0.04rem !important;
}
.notify-error{
top: 2.7rem !important;
right: 0.32rem !important;
width: 2rem !important;
height: 0.96rem !important;
background: rgba(255, 31, 36, 0.05) !important;
border-radius: 0.04rem 0px 0px 0.04rem !important;
}
</style>