VUE-Nuxt中如何修改Element-ui消息提示组件Message,MessageBox,Notification的样式

情景还原

在使用Nuxt开发的过程中，使用flexible.js对px单位做了处理，想做移动适配，于是导致组件的这些样式都会有所更改，在修改过程中，发现了一些问题，特此记录解决办法。这次使用的组件是Notification，对其他组件同样有效。

先来看我封装的代码，一个十分简单的提示框，为了不让他自动消失，我聪明的加了duration: 0,属性；

    openNotice(message,title='警告',type='warning') {
      this.$notify({
        title: title,
        message: '这是一条警告的提示消息',
        type: type,
        duration: 0,
      });

然后达到的效果就是：

然后查看了控制台元素，立马锁定了类名，一顿修改，无果

然后分析了一下原因。

原因

因为在vue中，推荐使用的是在样式表中添加scoped，以支持单组件的样式，如果刚开始就没有scoped，那么是可以直接通过类名进行修改Element-ui组件的样式的。

<style scoped>
</style>

解决办法

1.附加在没有scoped的style中

<style scoped>
  ...
</style>
<style>
  ...
  .el-message-box {
    width: 350px;
  }
</style>

2.给消息提示框加类名（荐）

在Element-ui的组件使用指南中，我们可以在Options中看到customClass参数

所以我们只需要在刚才的方法中添加该参数即可

    openNotice(message,title='警告',type='warning') {
      this.$notify({
        title: title,
        message: '这是一条警告的提示消息',
        type: type,
        duration: 0,
        customClass:'noticeMessage'
      });
    },

然后就可以在控制台中看到添加成功，使用这个类名进行修改即可啦。特别提醒，有些选择器需要使用深度选择器：>>>，也可以参考这篇文章的使用：elementUi中的el-input去掉border边框