用简单的方式让 Vue 组件支持主题替换和一键换肤

2024-01-13 21:32:57

简单几步让 Vue 组件支持主题替换和一键换肤

在 Vue 中，可以通过 CSS 变量来实现主题替换和一键换肤。CSS 变量是一种可以在整个应用中使用的动态值，可以轻松地被组件和模板所引用。

1. 创建 CSS 变量

首先，需要创建一个 CSS 变量文件，例如 theme.css，并在其中定义主题变量，例如：

:root {
  --primary-color: #409EFF;
  --text-color: #333;
  --background-color: #fff;
}

这些变量可以根据需要来定义，例如 --primary-color 用于定义主色调，--text-color 用于定义文本颜色，--background-color 用于定义背景颜色。

2. 在组件中使用 CSS 变量

在组件中，可以通过 v-bind 指令来引用 CSS 变量。例如，在一个按钮组件中，可以使用以下代码来设置按钮的背景颜色：

<template>
  <button :style="{ backgroundColor: primaryColor }">按钮</button>
</template>

<script>
import { computed } from 'vue'

export default {
  setup() {
    const primaryColor = computed(() => `var(--primary-color)`)

    return {
      primaryColor
    }
  }
}
</script>

3. 在应用中切换主题

在应用中，可以通过使用不同的 CSS 变量文件来切换主题。例如，可以创建一个 dark.css 文件，并将其中的变量值设置为暗色调：

:root {
  --primary-color: #000;
  --text-color: #fff;
  --background-color: #333;
}

然后，可以通过以下代码在应用中切换主题：

<script>
import { ref } from 'vue'

export default {
  setup() {
    const isDarkMode = ref(false)

    const toggleTheme = () => {
      isDarkMode.value = !isDarkMode.value
      document.documentElement.setAttribute('data-theme', isDarkMode.value ? 'dark' : 'light')
    }

    return {
      isDarkMode,
      toggleTheme
    }
  }
}
</script>