【VUE】ElementPlus之动态主题色调切换(Vue3 + Element Plus+Scss + Pinia)

<template>
  <div class="theme-switch-container">
    <el-color-picker
      v-model="themeColor"
      :predefine="predefineColors"
      class="theme-switch"
      popper-class="theme-picker-dropdown"
      size="small"
      @change="handleThemeChange"
    />
  </div>
</template>
 
<script setup lang="ts">
import { ref, watch } from 'vue';
import { useThemeStore } from '@/stores/themeStore';
 
const themeStore = useThemeStore();
const themeColor = ref(themeStore.theme);
const predefineColors = ref([
  '#409EFF', '#F56C6C', '#E6A23C', '#67C23A', '#909399', '#5470C6', '#F59EA2', '#F57C00', '#7B68EE', '#67C23A',
]);
 
const handleThemeChange = (color: string) => {
  themeStore.setTheme(color);
  document.documentElement.style.setProperty('--theme-color', color);
};
 
watch(themeColor, (newColor) => {
  themeStore.setTheme(newColor);
  document.documentElement.style.setProperty('--theme-color', newColor);
});
</script>
 
<style lang="scss" scoped>
.theme-switch-container {
  display: flex;
  align-items: center;
  margin-right: 10px;
 
  .theme-switch {
    margin-left: 10px;
  }
}
</style>

这个代码实例展示了如何在Vue 3应用程序中使用Element Plus组件库和SCSS来实现一个主题色调切换器。它使用了el-color-picker组件来提供颜色选择功能，并通过Pinia状态管理库来管理主题色。代码中包含了一个watch函数，用于监听选择的颜色变化，并更新页面的主题色。