04-面试之前端 Vue ElementUI

修改 ElementUI 样式的几种方式

参考答案：

修改 ElementUI 样式的方式有四种：

1. 新建全局样式表

   新建 global.css 文件，并在 main.js 中引入。global.css 文件一般都放在 src->assets 静态资源文件夹下的 style 文件夹下，在 main.js 的引用写法如下：

   import "./assets/style/global.css"

   在 global.css 文件中写的样式，无论在哪一个 Vue 单页面都会覆盖 ElementUI 默认的样式。

2. 在当前 Vue 单页面中添加一个新的 style 标签

   在当前的 Vue 单页面的 style 标签后，添加一对新的 style 标签，新的 style 标签中不要添加 scoped 属性。在有写 scoped 的 style 标签中书写的样式不会覆盖 ElementUI 默认的样式。

3. 使用/deep/深度修改标签样式

   找到需要修改的 ElementUI 标签的类名，然后在类名前加上/deep/，可以强制修改默认样式。这种方式可以直接用到有 scoped 属性的 style 标签中。

   /*修改级联选择框的默认宽度*/
   /deep/ .el-cascader {
     width: 100%;
   }

4. 通过内联样式 或者 绑定类样式覆盖默认样式

   通过内联样式 style ，绑定类样式的方式，可以在某些标签中可以直接覆盖默认样式，不是很通用。具体实例如下：

   <el-button :style="selfstyle">默认按钮</el-button>
   <script>
      export default {
        data() {
          return {
              selfstyle: {
                  color: "white",
          marginTop: "10px",
          width: "100px",
          backgroundColor: "cadetblue"
              }
          };
        }
      }
   </script>

   通过绑定修改样式方式修改：

   <el-button :class="[selfbutton]">默认按钮</el-button>
   <script>
   export default {
     data() {
       return {
         selfbutton: "self-button"
       };
     } 
   }
   </script>
   <style lang="stylus" rel="stylesheet/stylus" scoped>
   .self-button {
     color: white;
     margin-top: 10px;
     width: 100px;
     background-Color: cadetblue;
   }
   </style>

扩展：

• 第一种全局引入 css 文件的方式，适合于对 elementUI 整体的修改，比如整体配色的修改；
• 第二种添加一个 style 标签的形式，也能够实现修改默认样式的效果，但实际上因为是修改了全局的样式，因此 在不同的 Vue 组件中修改同一个样式有可能会有冲突。
• 第三种方式通过 /deep/ 的方式可以很方便的在 Vue 组件中修改默认样式，也不会于其他页面有冲突。
• 第四种方式局限性比较大，可以使用，但不推荐使用。

ElementUI 有什么用?

参考答案：

Element-UI：是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助网站快速成型

扩展：

ElementUI 特点：

一致性 Consistency

• 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
• 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback

• 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
• 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

• 简化流程：设计简洁直观的操作流程；
• 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
• 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

可控 Controllability

• 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
• 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

Reference

• https://juejin.cn/post/6844903918753808398
• https://blog.csdn.net/qq_44182284/article/details/111191455