切换主题功能,本文采取 CSS自定义变量 实现
-
使用 document.body.style.setProperty(‘–bg’, ‘red’); 来设置变量
-
使用 document.body.style.getPropertyValue(‘–bg’); 来获取变量
-
使用 document.body.style.removeProperty(‘–bg’);来删除变量
-
var()来访问。第二个值表示变量的默认值。如:var(–bg,‘#fff’)
-
:root {}声明变量,变量名前需用 – 开头
关键代码
<template>
<div id="content">
<button @click="handleTheme(1)">金色主题</button>
<button @click="handleTheme(2)">蓝色主题</button>
<button @click="handleTheme(3)">带背景图主题</button>
<div>
我是一段描述
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
handleTheme(target) {
if (target === 1) {
document.documentElement.style.setProperty("--a", "gold");
document.documentElement.style.setProperty("--b", "#000");
document.documentElement.style.setProperty("--c", "12px");
}
if (target === 2) {
document.documentElement.style.setProperty("--a", "blue");
document.documentElement.style.setProperty("--b", "#555");
document.documentElement.style.setProperty("--c", "18px");
}
if (target === 3) {
document.documentElement.style.setProperty(
"--a",
`url(${require("@/assets/logo.png")})`
);
document.documentElement.style.setProperty("--b", "red");
document.documentElement.style.setProperty("--c", "24px");
}
},
},
};
</script>
<style lang="less" scoped>
@import url("../../index.less");
</style>
index.less代码
:root {
--a: red;
--b: yellow;
--c: 16px;
}
#content {
background: var(--a);
height: 500px;
width: 400px;
font-size: var(--c);
color: var(--b);
}
实现效果