vue 动态切换皮肤

首先提供两种开发思路：

1. 在项目中引入不同CSS文件

前端独立实现，定义多套主题，每套生成一个样式文件，在项目的入口文件中判断使用那套主题，直接引入对应样式文件即可

2. 在项目中改变 SCSS 变量

前后端配合实现，通过接口前后端配合更改，优点是相对多变，不用发包，立即生效

这边需求是希望可以根据项目部署后的域名配置一套主题，后期不需要开发的介入也能随时更改主题，我根据公司的需求考量，使用的是第二种方式

其次开发阶段

先了解一下css函数：

CSS var() 函数

• 定义与用法

var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。

• CSS 语法

var(custom-property-name, value)

值	描述
custom-property-name	必需。自定义属性的名称，必需以 -- 开头。
value	可选。备用值，在属性不存在的时候使用。

• 函数使用

结合需求，我们要定义主题，需要创建具有全局作用域的变量，使用**:root 选择器**匹配文档的根元素。

1. 在style.less中声明 [全局变量]

:root{
  // Logo背景色
  --logo-background-color: #fff;
}

2. 在具体页面里通过var()函数使用绑定在:root上的全局变量

.logo{
   background-color: var(--logo-background-color);
 }

3. 在App.vue中引入全局的样式文件style.less

4. 接口传递的颜色值发生改变时，使用 JavaScript 来修改变量

setProperty()

• 定义与用法

setProperty() 方法为一个声明了CSS样式的对象设置一个新的值。

• 语法

style.setProperty(propertyName, value, priority);

值	描述
propertyName	是一个 DOMString ，代表被更改的CSS属性。
value	可选。是一个 DOMString ，含有新的属性值。如果没有指定, 则当作空字符串。注意: value 不能包含 “!important”
priority	可选。是一个 DOMString 允许设置 “important” CSS 优先级。如果没有指定, 则当作空字符串。

• 使用

document.body.style.setProperty('--logo-background-color', 'red'); 

初始化的时候执行换肤方法，这样就能实现根据动态的color值实现动态的改变主题色了

// 更换皮肤
initThemeColor(list) {
  const root = document.documentElement;
  // 校验颜色的格式
  const re1 = /^#([0-9a-f]{6}|[0-9a-f]{3})$/i;
  if (list.length > 0) {
     list.forEach((item) => {
       if (re1.test(item.parameterValue)) {
         root.style.setProperty(item.parameterName, item.parameterValue);
       }
     });
  }
}