掌握 VueVite 和 SCSS 实现一键换肤的魔法步骤

<template>
  <div class="theme-changer">
    <button
      v-for="theme in themes"
      :key="theme"
      :class="{ active: activeTheme === theme }"
      @click="changeTheme(theme)"
    >
      {{ theme }}
    </button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import { useTheme } from './composables/useTheme';
 
export default {
  setup() {
    const themes = ['light', 'dark', 'sepia'];
    const { activeTheme, changeTheme } = useTheme(themes);
 
    return {
      themes,
      activeTheme,
      changeTheme
    };
  }
};
</script>
 
<style lang="scss">
.theme-changer {
  button {
    margin: 5px;
    padding: 5px 10px;
    background: #fff;
    border: 1px solid #ddd;
    outline: none;
    cursor: pointer;
    &.active {
      background: #007bff;
      color: white;
      border-color: #007bff;
    }
  }
}
</style>

这个简单的示例展示了如何使用 Vue3、Vite 和 SCSS 创建一个可以更换网站主题的组件。useTheme 是一个假设的 composable 函数，它需要从开发者定义，用于处理主题状态和更换逻辑。按钮列表允许用户在提供的主题之间切换，通过点击按钮触发 changeTheme 函数。SCSS 用于提供按钮的样式，并根据其是否激活（代表当前主题）改变其样式。