vue-主题切换(改变背景颜色、字体颜色等)

最新推荐文章于 2025-09-17 15:02:20 发布

原创最新推荐文章于 2025-09-17 15:02:20 发布 · 650 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

在这里插入图片描述

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>