element-ui中的样式是使用scss编写的,然后编译成css。就是我们在main.js中引入的那个css文件
import ‘element-ui/lib/theme-chalk/index.css’;
1、更改scss变量
1、为什么要更改
在引入 Element 时,可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸,zIndex 设置弹框的初始 z-index(默认值:2000)。
Vue.use(Element, { size: 'small', zIndex: 3000 });
使用size改变组件的默认尺寸,但是只有large/medium / small / mini这几个选项可选。那么有时我们想要改为其它任意的尺寸。
2、怎么改
新建一个scss文件,假设命名为myElement.scss
$--font-size-base: 24px !default;
$--size-base: 24px !default;
$--font-line-height-primary: 40px !default;
$--font-path: '/fonts' !default;
$--select-input-font-size: 24px !default;
$--select-option-height: 60px !default;
$--select-group-height: 50px !default;
$--select-group-font-size: 24px !default;
$--select-dropdown-max-height: 500px !default;
$--input-height: 60px !default;
$--input-width: 250px !default;
$--button-font-size: 24px !default;
$--button-padding-vertical: 17px !default;
$--button-padding-horizontal: 34px !default;
$--radio-input-height: 24px !default;
$--radio-input-width: 24px !default;
$--radio-font-size: 24px !default;
$--dialog-font-size: 24px !default;
$--collapse-header-font-size: 26px !default;
$--collapse-content-font-size: 24px !default;
$--collapse-header-height: 78px !default;
$--pagination-font-size: 26px !default;
$--pagination-button-width: 90px !default;
$--pagination-button-height: 60px !default;
$--input-mini-font-size: 24px !default;
$--input-mini-height: 60px !default;
$--message-close-size: 26px !default;
$--messagebox-error-font-size: 24px !default;
$--messagebox-font-size: 26px !default;
$--messagebox-content-font-size: 24px !default;
然后引入module中的element的scss文件
@import "../../node_modules/element-ui//packages/theme-chalk/src/index.scss";
最后在所在文件夹,打开命令窗口,然后运行如下命令进行编译
sass myElement.scss myElement.css --style compressed
在编译 Sass 代码时,我们可以指定 Sass 的编译输出格式,这需要用到 --style 指令,这个指定后面可接如下四种 Sass 输出格式:
nested:嵌套输出格式,默认格式。
expanded:展开输出方式。
compact:紧凑输出方式 。
compressed:压缩输出方式 。
编译后,在所在文件夹内得到一个名为myElement.css的文件。在main.js中引入它。
2、一键更改主题颜色
一键更改element主题颜色的原理,就是找到指定style标签,然后生成一个新的样式文件,然后替换调原来的style标签。