【vue&elementui】自定义样式如el-dialog等、修改源码等_vue的el-dialog美化

前言

使用element-ui中的一些记录，比如自定义样式、修改源码。

自定义样式

el-dialog

• 不能直接在<style scoped>中修改，这样修改后不会生效
• 在vue的SFC中，是允许多个style 块的,可以在写一个不加scope的style,定义好类名在里面单独改样式.
• 例子：

<el-dialog  class="aaa">  </el-dialog>
<style scope>
//其他局部样式
</style>
<style lang="scss">
//dialog样式，按照类名区分 不然还是在全局css中修改更清晰一些。
.aaa {
  .el-dialog__footer {
    text-align: center;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12

参考：element 中el-dialog弹框样式修改不生效没有作用到属性上
element-ui如何修改el-dialog的样式？

el-select

如何修改

• 在el-select上增加属性：:popper-append-to-body="false" （原因：这个属性默认为true，于是使选择器的下拉框是直接插入body标签中，与最外级id为app的div同级，所以无法覆盖到下拉框样式）
• 使用::v-deep

例子

    <div class="input-group">
      <el-select
        v-model="testModel"
        placeholder="测试"
        :popper-append-to-body="false"
      >
        <el-option
          v-for="option in optionsTest"
          :key="option"
          :label="option"
          :value="option"
        ></el-option>
      </el-select>
    </div>

//遍历数组生成选项
      optionsTest: [
        "1",
        "231312",
        "23",
      ],

//css部分 根据自己的需求修改样式
.input-group {
  .el-select {
    width: 200px;

    ::v-deep .el-input--suffix {
      height: 100%;

      > input {
        border-radius: 10px;
        box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
        background-color: #d9d9d9;
        padding: 8px 15px;
        margin: 5px 0px;
        border: 0;
        width: 170px;
        height: 16px;
        color: #313131;
        box-sizing: content-box;
        &::placeholder {
          color: #313131; /* 在这里指定你想要的颜色 */
        }
      }

      .el-input__suffix {
        height: 40px;
        top: -2px;

        .el-icon-arrow-up:before {
          content: "";
          color: #2f3030;
        }
      }
    }
  }
  ::v-deep .el-popper {
    margin-top: 0;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

参考

ElementUI Select选择器下拉框样式修改
自定义element-ui中Select 选择器的样式 这个是带向下箭头的样式修改的。

el-tab

实现&参考

自定义element的tab栏样式

修改elementui源码并应用

vue项目中修改element-ui源码，如何运用到项目中 (修改 node_modules 里的文件,并应用)：利用webpack 的alias 挺好用的样子，没试。