当前位置：首页 > VUE

vue实现点击换肤

2026-03-09 01:02:27VUE

Vue 实现点击换肤功能

在 Vue 中实现点击换肤功能通常涉及动态切换 CSS 变量或类名。以下是几种常见方法：

使用 CSS 变量动态切换主题

定义不同主题的 CSS 变量，通过修改根元素的变量值实现换肤：

<template>
  <div>
    <button @click="changeTheme('light')">浅色主题</button>
    <button @click="changeTheme('dark')">深色主题</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeTheme(theme) {
      const root = document.documentElement
      if (theme === 'dark') {
        root.style.setProperty('--bg-color', '#333')
        root.style.setProperty('--text-color', '#fff')
      } else {
        root.style.setProperty('--bg-color', '#fff')
        root.style.setProperty('--text-color', '#333')
      }
    }
  }
}
</script>

<style>
:root {
  --bg-color: #fff;
  --text-color: #333;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
</style>

使用类名切换主题

通过动态绑定 class 实现主题切换：

<template>
  <div :class="currentTheme">
    <button @click="currentTheme = 'light-theme'">浅色主题</button>
    <button @click="currentTheme = 'dark-theme'">深色主题</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTheme: 'light-theme'
    }
  }
}
</script>

<style>
.light-theme {
  background-color: #fff;
  color: #333;
}

.dark-theme {
  background-color: #333;
  color: #fff;
}
</style>

使用 Vuex 管理主题状态

对于大型应用，可以使用 Vuex 集中管理主题状态：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    theme: 'light'
  },
  mutations: {
    setTheme(state, theme) {
      state.theme = theme
    }
  }
})

<template>
  <div :class="theme">
    <button @click="setTheme('light')">浅色主题</button>
    <button @click="setTheme('dark')">深色主题</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['theme'])
  },
  methods: {
    ...mapMutations(['setTheme'])
  }
}
</script>

持久化主题选择

使用 localStorage 保存用户选择的主题，实现刷新后保持主题：

methods: {
  changeTheme(theme) {
    localStorage.setItem('theme', theme)
    this.applyTheme(theme)
  },
  applyTheme(theme) {
    // 应用主题的逻辑
  },
  mounted() {
    const savedTheme = localStorage.getItem('theme') || 'light'
    this.applyTheme(savedTheme)
  }
}