浅谈Vue使用Elementui修改默认的最快方法

下面我来详细讲解如何使用Element UI修改Vue的默认主题样式。

1. 安装 Element UI

首先需要安装Element UI，可以通过npm安装：

npm install element-ui -S

1. 引入 Element UI

在Vue项目的main.js文件中，引入Element UI的样式文件和js文件：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

1. 使用自定义样式修改主题样式

Element UI提供了全局样式变量，可以在项目中自定义修改主题样式。首先要先找到Element UI对应的全局样式变量，可以在Element UI官网的主题定制页面或Github上找到。

例如我们想要修改按钮的主题样式，可以在主题定制页面上找到Button的全局样式变量：

$--color-primary: #409EFF; /* 主题色 */
$--color-success: #67C23A; /* 成功的颜色 */
$--color-warning: #E6A23C; /* 警告的颜色 */
$--color-danger: #F56C6C; /* 危险的颜色 */

在项目中，可以在自己的样式文件中重新定义以上变量，例如我们将主题色修改成红色：

:root {
  --color-primary: #f00;
}

这样就可以修改Element UI按钮的主题色为红色。

1. 单组件样式修改方法

如果只需要修改某个组件的样式，在引入组件时加上customClass即可：

<el-button customClass="custom-button">按钮</el-button>

再在样式文件中加上.custom-button的样式定义：

.custom-button {
  background-color: #f00;
  color: #fff;
}

这样就可以修改该按钮的样式为背景色为红色，文字颜色为白色。

示例1：修改表格的主题样式

在样式文件中重新定义全局样式变量中的颜色值：

:root {
  --color-primary: #f00;
}

再在表格组件中通过设置表头的label-class-name属性来自定义表头样式：

<el-table :data="tableData">
  <el-table-column prop="date" label="日期" label-class-name="custom-column"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
</el-table>

最后在样式文件中加上.custom-column的样式定义：

.custom-column {
  color: #fff;
  background-color: #f00;
}

这样就可以修改表格的主题样式了。

示例2：修改日历的主题样式

在样式文件中重新定义全局样式变量中的颜色值：

:root {
  --color-primary: #f00;
}

再在日历组件中设置 :picker-options 属性来自定义日历样式：

<template>
  <el-date-picker
    v-model="value"
    type="date"
    :picker-options="options"
    placeholder="选择日期">
  </el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      options: {
        disabledDate: time => time.getTime() < Date.now(),
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }],
        cellClassName: 'custom-cell'
      }
    }
  }
}
</script>

最后在样式文件中加上.custom-cell的样式定义：

.custom-cell {
  color: #fff;
  background-color: #f00;
}

这样就可以修改日历的主题样式了。