less 覆盖 ElementUI 的 Message 宽度

less 覆盖 Element UI 的 Message 宽度

因为要在手机端使用 Element UI，所以不可避免的使用了 Element UI 的 Message 组件。但是 Message 组件多半不能全部显示，很难看（如下），所以就想覆盖Message 的样式。在网上找了一圈，加上自己的不断尝试，最终成功。

在 Vue 中使用 ElementUI 的 Message 组件

我们采用按需引入 Element UI 组件的形式。创建在 assets 文件夹下创建import.js文件，内容如下。

import { Message, MessageBox } from 'element-ui'
import Vue from 'vue'

Vue.prototype.$message = Message

在 main.js 中引入import.js并引入Element UI的CSS样式

import Vue from 'vue'
import './assets/import.js'
import 'element-ui/lib/theme-chalk/index.css'

调试：找到 Message 宽度所在

在调试中遇到的第一个问题就是：Message出现的时间太短，Ctrl+Shift+C选中这个元素刚打开调试面板时，这个组件就消失了。所以第一步需要做的就是，调整Message出现的时间。
这里用的方法是传入时间参数。官网文档说的很明白，在发送提示消息时，如果参数是String，那参数就是消息内容。其实参数可以是一个对象options

login () {
  this.$refs.loginFormRef.validate(valid => {
    if (!valid) {
      return this.$message.error({
        message: '请检查用户名密码',
        duration: 100000,
      })
    }
  })
},

通过传入duration属性，我们将Message显示时间调整为100秒（单位默认为毫秒)。如果设置为0甚至不会自动关闭😏。这样之后，我们终于能看到Message的庐山真面目了。

<div role="alert" class="el-message el-message--error" style="z-index: 2002;">
	<i class="el-message__icon el-icon-error"></i>
	<p class="el-message__content">请检查用户名密码</p>
	<!---->
</div>

对应的CSS样式

很明显，.el-message选择器中的min-width决定了Message的宽度。如果有小伙伴不熟悉这个属性，我们先来简单介绍一下。min-width的意思就是最小宽度。显然如果消息的内容超过380px(上图)，那么最终的宽度就是实际宽度。如果用js的三元表达式

let someWidth = xxx;
let realWidth = someWidth > minWidth ? someWidth : minWidth;

在菜鸟教程提供的在线运行环境中，可以看到div的宽度为200px，width: 1px显然不起作用。
下面的问题：如果覆盖Message的宽度？

使用 less 覆盖

使用less需要npm安装less和less-loader

npm install less@3.10.3 less-loader@5.0.0 --save

使用less的方法也很简单。在.vue文件的<style lang="less" scoped>.
问题出现在，下面的代码不论加不加scoped、不论加不加!important、不论用.el-message还是.el-message--error都不管用。😭😭😭

<style lang="less" scoped>
/deep/ .el-message {
  min-width: 30px !important;
}
</style>

稍等，官网文档里好像还有一个东西…

我可以自定义类名，我灵光一现⚡自己加个类名

login () {
  this.$refs.loginFormRef.validate(valid => {
    if (!valid) {
      return this.$message.error({
        message: '请检查用户名密码',
        duration: 0,
        customClass: 'myBox'
      })
    }
  })
}

然后再次使用 less(🔈：其实一个vue文件里可以有两个<style>标签)

<style lang="less">
.myBox {
  min-width: 30px !important;
}
</style>

噔噔…(*￣０￣)ノ

大功告成😊。唯一遗憾的一点是，必须将.myBox暴露为全局样式，不然还是不生效。
想要偷懒不写!important的告诉你，不可以🙅‍，不会生效的。

版本

该例子中使用的各种包版本如下

"dependencies": {
    "axios": "^0.18.0",
    "core-js": "^3.6.5",
    "element-ui": "^2.5.1",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "mint-ui": "^2.2.13",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.0",
    "@vue/cli-plugin-eslint": "^4.5.0",
    "@vue/cli-service": "^4.5.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  }

欢迎大家有更好的方法请告诉我，另外知道为什么使用/deep/ .el-message不生效也麻烦告诉我。多谢（PS：其实我没完整学过less😅）