每日一写(更改element-UI消息弹框$notify的样式修改问题)

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>