less 覆盖 ElementUI 的 Message 宽度

向右看齐 2024-05-24 03:59 72阅读 0赞

## less 覆盖 Element UI 的 Message 宽度 ##

因为要在手机端使用 `Element UI`，所以不可避免的使用了 Element UI 的 `Message` 组件。但是 `Message` 组件多半不能全部显示，很难看（如下），所以就想覆盖`Message` 的样式。在网上找了一圈，加上自己的不断尝试，最终成功。  
![在这里插入图片描述][0900d888a4474939ab9a79fb0ec2e64d.png_pic_center]

### 在 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`出现的时间。  
这里用的方法是[传入时间参数][Link 1]。官网文档说的很明白，在发送提示消息时，如果参数是`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`样式  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6K6h56eR55qE55S35Lq657ud5LiN6K6k6L6T_size_7_color_FFFFFF_t_70_g_se_x_16]  
很明显，`.el-message`选择器中的`min-width`决定了`Message`的宽度。如果有小伙伴不熟悉这个属性，我们先来简单介绍一下。`min-width`的意思就是`最小宽度`。显然如果消息的内容超过`380px`(上图)，那么最终的宽度就是实际宽度。如果用`js`的三元表达式

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6K6h56eR55qE55S35Lq657ud5LiN6K6k6L6T_size_20_color_FFFFFF_t_70_g_se_x_16]  
在菜鸟教程提供的在线运行环境中，可以看到`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`都不管用。???

稍等，官网文档里好像还有一个东西…  
![在这里插入图片描述][20912933cd5b486aaa7a3e6f45b80063.png]  
我可以自定义类名，我灵光一现⚡自己加个类名

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

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

噔噔…(\*￣０￣)ノ  
![在这里插入图片描述][455cf06dce8b44f18989c13620633a7b.png]  
大功告成?。唯一遗憾的一点是，必须将`.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`?）

[0900d888a4474939ab9a79fb0ec2e64d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/8898c373640a46b4a74ca2acdee551d6.png
[Link 1]: https://element.eleme.io/2.5/#/zh-CN/component/message
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6K6h56eR55qE55S35Lq657ud5LiN6K6k6L6T_size_7_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/e2fffbf1e14d435bbf5a8381b632563e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6K6h56eR55qE55S35Lq657ud5LiN6K6k6L6T_size_20_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/18066346b2b24514961cc41045c1a94e.png
[20912933cd5b486aaa7a3e6f45b80063.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/0ee5426946824d7cbaa6c9b8afe4349c.png
[455cf06dce8b44f18989c13620633a7b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/10cc2dfd82ce4c15a6c544f1d4367776.png