vite+ts+elementPlus修改组件主题色

        对于刚开始接触elementPlus的小可爱们总是通过样式穿透（:deep(.calssname)）的方式去修改form组件的主题样式，这样就需要使用大量的篇幅去修改，非常的繁琐并且存在遗漏。本文意在使用全局修改的方式去统一修改样式，后期维护更加方便且简便。

1、创建一个样式文件。

        可以如下图：

文件的位置自己定义一个文件夹就可以了，如 src/assets/less 文件夹下。

2、在 elementPlusTopic.less 文件下定义样式

        样式内容如图所示：

我只修改了默认的 type=“primary”下的样式，后端可以直接完善

3、在index.less中全部引入并全局使用

如图引入

4、在main.ts文件中引入 indx.less

     这种格式的引入。

5、兼容颜色渐变的9个区间

        

如图官方是存在 1~9之间的颜射变化的，我们也需要统一去修改

6、定义一个全局的修改样式的 ts 文件 

        定义一个ts文件，可以放在 src/utils/color.ts 代码如下：

export default {
  HexToRgb(str: string): number[] | null {
    str = str.replace('#', '');
    const hxs = str.match(/../g);
    if (hxs) {
      const convertedArray: number[] = [];
      for (let i = 0; i < 3; i++) {
        const parsedNumber = parseInt(hxs[i], 16);
        if (!isNaN(parsedNumber)) {
          convertedArray.push(parsedNumber);
        }
      }
      return convertedArray;
    }
    return null;
  },
  RgbToHex(a: number, b: number, c: number): string {
    const hexs = [a.toString(16), b.toString(16), c.toString(16)];
    for (let i = 0; i < 3; i++) {
      if (hexs[i].length === 1) {
        hexs[i] = '0' + hexs[i];
      }
    }
    return '#' + hexs.join('');
  },
  darken(color: string, level: number): string {
    const rgbc = this.HexToRgb(color) as number[];
    for (let i = 0; i < 3; i++) {
      rgbc[i] = Math.floor(rgbc[i] * (1 - level));
    }
    return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
  },
  lighten(color: string, level: number): string {
    const rgbc = this.HexToRgb(color) as number[];
    for (let i = 0; i < 3; i++) {
      rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i]);
    }
    return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
  }
};

7、使用color.ts配置文件进行统一修改

在App.vue文件中代码如下：

先引入方法

import colorTool from "@/utils/color";

//获取主题颜色 让主题色用于兼容决大部分
const app_color = getComputedStyle(document.documentElement)
  .getPropertyValue("--el-color-primary")
  .trim();
if (app_color) {
  document.documentElement.style.setProperty("--el-color-primary", app_color);
  for (let i = 1; i <= 9; i++) {
    document.documentElement.style.setProperty(
      `--el-color-primary-light-${i}`,
      colorTool.lighten(app_color, i / 10)
    );
    document.documentElement.style.setProperty(
      `--el-color-primary-dark-${i}`,
      colorTool.darken(app_color, i / 10)
    );
  }
}