Vue前端换肤

换肤效果

本文采取 CSS自定义变量 实现

• 使用 document.body.style.setProperty('--bg', 'red'); 来设置变量

• 使用 document.body.style.getPropertyValue('--bg'); 来获取变量

• 使用 document.body.style.removeProperty('--bg');来删除变量

• var()来访问。第二个值表示变量的默认值。如:var(--bg,'#fff')

• :root {}声明

:root {
  --bg: red;
}

#test{
  background:var(--bg);
}

:root{} var()

注意：

• 背景图片不支持这种写法 --bg:url('@/assets/bg1.jpg'); 需要换背景图片可在js中用 字符串模板 + require 设置。
  如：document.body.style.setProperty('--bg',`url(${require('@/assets/bg1.jpg')})`);

读取小坑。document.body.style.getPropertyValue('--bg'); 读取出来为空。
可换成如下代码：
const rootStyles = getComputedStyle(document.documentElement);
const varValue = rootStyles.getPropertyValue('--bg').trim(); //读取--bg值

完！！！

---

上代码吧！！

// test.vue

// index.scss

:root{
  --bg:red;
  --color:#000;
  --fontSize:16px;
  --fill:red;
}
$color:var(--color);
#test {
  background:var(--bg);
  height:500px;
  width: 400px;
  font-size: var(--fontSize);
  color: $color;
  .users{
    fill: var(--fill);
    font-size: 100px;
  }
}

• 更多换肤方法可参考掘金大佬 聊一聊前端换肤