每日一写(更改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进行加权