情景还原

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

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

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

然后达到的效果就是:

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

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

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

然后分析了一下原因。

原因

因为在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参数

参数说明类型可选值默认值
customClass自定义类名string

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

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

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

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

如果觉得我的文章对你有用,请随意赞赏