1.创建cssmixin文件,里面存有混入的内容
export const cssmixin = {
data() {
return {
lightOrDark: 'light',
color: 'red',
bgcolor: '#FFFFFF',
}
},
computed: {
cssVars() {
return {
'--color': this.color,
'--bgcolor': this.bgcolor
}
}
},
watch: {},
created() { },
methods: {
changeColor(type) {
this.lightOrDark = type
if (type === 'light') {
this.color = 'red'
this.bgcolor = '#FFFFFF'
} else {
this.color = '#FFFFFF'
this.bgcolor = 'black'
}
}
}
}
2.在文件中使用,先引入混入,在页面开头绑定属性cssVars,css中var引用变量。点击按钮切换主题
<template>
<div :style="cssVars" class="var_class">
33333333
<div :class="{ selected: lightOrDark === 'dark' }" @click="changeSwitch">
按钮
</div>
</div>
</template>
<script>
import { cssmixin } from "./mixin/cssmixin.js";
//引入文件
export default {
props: {},
mixins: [cssmixin], //混入
data() {
return {};
},
computed: {},
methods: {
changeSwitch() {
if (this.lightOrDark === "light") {
this.changeColor("dark");
} else {
this.changeColor("light");
}
},
},
};
</script>
//var是css里的属性,可以接受一个变量
<style scoped lang="scss">
.var_class {
width: 100px;
height: 100px;
background-color: var(--bgcolor);
color: var(--color);
}
</style>