动态修改主题

这里主要通过动态选择主题色，根据element-plus/theme-chalk/index.css主题文件作为模板，用主题色替换变量 动态生成 全新的theme主题样式内容，内嵌到style标签中。

elemen主题涉及到的主题变量为以下几种：

  1. element-plus ui每套主题 共用到以下种颜色 根据白色和主题色进行混合生成渐变色
  2. sasss中Mix 函数是将两种颜色根据一定的比例混合在一起，生成另一种颜色
  3. $--color-primary: #409EFF !default;
  4. // 下面几种都是根据主题色生成的渐变色 所以我们只关心主题色是什么 然后再生成这九种渐变色 把原始模板替换掉
  5. $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
  6. $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
  7. $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
  8. $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
  9. $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
  10. $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
  11. $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
  12. $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
  13. $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */

关于element ui 颜色 设计可以阅读这两篇文章
https://element-plus.gitee.io/#/zh-CN/component/color
https://juejin.cn/post/6844903960218697741

效果图
默认情况下
image.png
修改主题
image.png
确定后
image.png
主题修改 看下html 动态生成的style
image.png

本章建议

> 建议大家先结合完整源码 先过一遍 别着急写 先看下主线 再细究

看源码时从App.vue里这个hook方法开始看 生成主题主要逻辑就在这个hook方法里
vue3-admin/src/App.vue
目前最新源码 https://gitee.com/brolly/vue3-element-admin
image.png

图标字体文件准备

选择对应版本图标字体

https://unpkg.com/browse/element-plus@1.0.2-beta.33/lib/theme-chalk/fonts/
image.png
下载下来放到 vue3-admin/public下
image.png
如何下载

点击ttf文件和woff文件 进去后点击 view raw下载

image.png
image.png

2-1 安装相关依赖

安装axios

首次我们需要远程获取element-plus/lib/theme-chalk/index.css 主题样式文件，作为原始模板

  1. npm i axios

安装css-color-function

将通过该包提供的convert函数生成将css color-mod函数生成的渐变色 转换成rgb css-color-function使用说明文档

根据css-color-function 的color.convert函数 将颜色函数color CSS字符串转换为RGB颜色字符串。

  1. // 下面color函数以及 shade tin是css的color-mod函数
  2. // 了解文档 http://cdn1.w3cplus.com/css4/color-mod.html
  3. 'color(#11A983 shade(10%))' => 'rgb(15, 152, 118)'
  4. 'color(#11A983 tint(10%))' => 'rgb(41, 178, 143)'
  5. 'color(#11A983 tint(20%))' => 'rgb(65, 186, 156)'
  6. 'color(#11A983 tint(30%))' => 'rgb(88, 195, 168)'
  7. 'color(#11A983 tint(40%))' => 'rgb(112, 203, 181)'
  8. 'color(#11A983 tint(50%))' => 'rgb(136, 212, 193)'
  9. 'color(#11A983 tint(60%))' => 'rgb(160, 221, 205)'
  10. 'color(#11A983 tint(70%))' => 'rgb(184, 229, 218)'
  11. 'color(#11A983 tint(80%))' => 'rgb(207, 238, 230)'
  12. 'color(#11A983 tint(90%))' => 'rgb(231, 246, 243)'
  14. // 利用css-color-function转换为rgb
  15. import color from 'css-color-function'
  16. color.convert('color(#11A983 shade(10%))') // 'rgb(15, 152, 118)'
  1. npm i css-color-function

需要注意该包没有声明文件 需要自己定义下

手动创建声明文件

可能需要重新启动npm run serve 如果还报缺少声明文件 重启下

src/css-color-function.d.ts

  1. declare module 'css-color-function' {
  2.   export function convert(color: string): string;
  3. }

2-2 Navbar添加设置图标

image.png
image.png
src/layout/components/Navbar.vue

  1. <template>
  2.   <div class="navbar">
  3.     <hambuger  @toggleClick="toggleSidebar" :is-active="sidebar.opened"/>
  4.     <breadcrumb />
  5.     <div class="right-menu">
  6.       <!-- 设置 -->
  7.       <div @click="openShowSetting" class="setting right-menu-item hover-effect">
  8.         <i class="el-icon-s-tools"></i>
  9.       </div>
  10.       <!-- 全屏 -->
  11.       <screenfull id="screefull" class="right-menu-item hover-effect" />
  12.       <!-- element组件size切换 -->
  13.       <el-tooltip content="Global Size" effect="dark" placement="bottom">
  14.         <size-select class="right-menu-item hover-effect" />
  15.       </el-tooltip>
  16.       <!-- 用户头像 -->
  17.       <avatar />
  18.     </div>
  19.   </div>
  20. </template>
  22. <script lang="ts">
  23. import { defineComponent, computed } from 'vue'
  24. import Breadcrumb from '@/components/Breadcrumb/index.vue'
  25. import Hambuger from '@/components/Hambuger/index.vue'
  26. import { useStore } from '@/store/index'
  27. import Screenfull from '@/components/Screenfull/index.vue'
  28. import SizeSelect from '@/components/SizeSelect/index.vue'
  29. import Avatar from './avatar/index.vue'
  31. export default defineComponent({
  32.   name: 'Navbar',
  33.   components: {
  34.     Breadcrumb,
  35.     Hambuger,
  36.     Screenfull,
  37.     SizeSelect,
  38.     Avatar
  39.   },
  40.   emits: ['showSetting'],
  41.   setup(props, { emit }) {
  42.     // 使用我们自定义的useStore 具备类型提示
  43.     // store.state.app.sidebar 对于getters里的属性没有类型提示
  44.     const store = useStore()
  45.     const toggleSidebar = () => {
  46.       store.dispatch('app/toggleSidebar')
  47.     }
  48.     // 从getters中获取sidebar
  49.     const sidebar = computed(() => store.getters.sidebar)
  51.     // 打开设置面板
  52.     const openShowSetting = () => {
  53.       emit('showSetting', true)
  54.     }
  56.     return {
  57.       toggleSidebar,
  58.       sidebar,
  59.       openShowSetting
  60.     }
  61.   }
  62. })
  63. </script>
  65. <style lang="scss">
  66.   .navbar {
  67.     display: flex;
  68.     background: #fff;
  69.     border-bottom: 1px solid rgba(0, 21, 41, .08);
  70.     box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
  71.     .right-menu {
  72.       flex: 1;
  73.       display: flex;
  74.       align-items: center;
  75.       justify-content: flex-end;
  76.       padding-right: 15px;
  77.       .setting {
  78.         font-size: 26px;
  79.       }
  80.       &-item {
  81.         padding: 0 8px;
  82.         font-size: 18px;
  83.         color: #5a5e66;
  84.         vertical-align: text-bottom;
  85.         &.hover-effect {
  86.           cursor: pointer;
  87.           transition: background .3s;
  89.           &:hover {
  90.             background: rgba(0, 0, 0, .025);
  91.           }
  92.         }
  93.       }
  94.     }
  95.   }
  96. </style>

2-2 封装RightPanel组件

点击设置右边出来设置面板
image.png
image.png

element.ts中导入el-drawer组件

image.png

src/components/RightPanel/index.vue

  1. <template>
  2.   <div class="right-panel">
  3.     <el-drawer
  4.       :model-value="modelValue"
  5.       :direction="direction"
  6.       :show-close="showClose"
  7.       :custom-class="customClass"
  8.       :with-header="withHeader"
  9.       :title="title"
  10.       :size="size"
  11.       @close="handleClose"
  12.     >
  13.       <slot />
  14.     </el-drawer>
  15.   </div>
  16. </template>
  18. <script lang="ts">
  19. import { defineComponent } from 'vue'
  21. export default defineComponent({
  22.   name: 'RightPanel',
  23.   props: {
  24.     modelValue: {
  25.       type: Boolean,
  26.       default: true
  27.     },
  28.     direction: {
  29.       type: String,
  30.       validator(val: string) {
  31.         return ['rtl', 'ltr', 'ttb', 'btt'].includes(val)
  32.       },
  33.       default: 'rtl'
  34.     },
  35.     title: {
  36.       type: String,
  37.       default: '自定义title'
  38.     },
  39.     size: {
  40.       type: [String, Number]
  41.     },
  42.     customClass: {
  43.       type: String,
  44.       default: 'setting-panel'
  45.     },
  46.     showClose: {
  47.       type: Boolean,
  48.       default: true
  49.     },
  50.     withHeader: {
  51.       type: Boolean,
  52.       default: true
  53.     }
  54.   },
  55.   // 在组件上使用modelValue文档说明
  56.   // https://v3.cn.vuejs.org/guide/component-basics.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-v-model
  57.   emits: ['update:modelValue', 'close'],
  58.   setup(props, { emit }) {
  59.     const handleClose = () => {
  60.       emit('update:modelValue', false)
  61.       emit('close')
  62.     }
  64.     return {
  65.       handleClose
  66.     }
  67.   }
  68. })
  69. </script>
  71. <style lang="scss" scoped>
  72. </style>

layout组件中导入rightPanel

image.png
src/layout/index.vue

  1. <template>
  2.   <div class="app-wrapper">
  3.     <div class="sidebar-container">
  4.       <Sidebar />
  5.     </div>
  6.     <div class="main-container">
  7.       <div class="header">
  8.         <navbar @showSetting="openSetting" />
  9.         <tags-view />
  10.       </div>
  11.       <!-- AppMain router-view -->
  12.       <app-main />
  13.     </div>
  14.     <right-panel
  15.       v-model="showSetting"
  16.       title="样式风格设置"
  17.       :size="SettingsPanelWidth"
  18.     >
  19.       <!-- settings 面板设置组件 -->
  20.       <settings />
  21.     </right-panel>
  22.   </div>
  23. </template>
  25. <script lang="ts">
  26. import { defineComponent, ref } from 'vue'
  27. import Sidebar from './components/Sidebar/index.vue'
  28. import AppMain from './components/AppMain.vue'
  29. import Navbar from './components/Navbar.vue'
  30. import TagsView from './components/TagsView/index.vue'
  31. import RightPanel from '@/components/RightPanel/index.vue'
  32. import Settings from './components/Settings/index.vue'
  33. import varibalse from '@/styles/variables.scss'
  35. export default defineComponent({
  36.   components: {
  37.     Sidebar,
  38.     AppMain,
  39.     Navbar,
  40.     TagsView,
  41.     RightPanel,
  42.     Settings
  43.   },
  44.   setup() {
  45.     // rightPanel显示隐藏状态
  46.     const showSetting = ref(false)
  48.     const openSetting = () => {
  49.       showSetting.value = true
  50.     }
  52.     return {
  53.       showSetting,
  54.       openSetting,
  55.       // 调整panel宽度
  56.       SettingsPanelWidth: varibalse.settingPanelWidth
  57.     }
  58.   }
  59. })
  60. </script>
  62. <style lang="scss" scoped>
  63.   .app-wrapper {
  64.     display: flex;
  65.     width: 100%;
  66.     height: 100%;
  67.     .main-container {
  68.       flex: 1;
  69.       display: flex;
  70.       flex-direction: column;
  71.       overflow: hidden;
  72.       .app-main {
  73.         /* 50= navbar  50  如果有tagsview + 34  */
  74.         min-height: calc(100vh - 84px);
  75.       }
  76.     }
  77.   }
  78. </style>

调整样式修改scss变量

src/styles/variables.scss
image.png
scss变量类型声明不要忘了
image.png
src/styles/variables.scss

  1. // base color
  2. $blue:#324157;
  3. $light-blue:#3A71A8;
  4. $red:#C03639;
  5. $pink: #E65D6E;
  6. $green: #30B08F;
  7. $tiffany: #4AB7BD;
  8. $yellow:#FEC171;
  9. $panGreen: #30B08F;
  11. // sidebar
  12. $menuText:#bfcbd9;
  13. $menuActiveText:#409EFF;
  14. $subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
  16. $menuBg:#304156;
  17. $menuHover:#263445;
  19. $subMenuBg:#1f2d3d;
  20. $subMenuHover:#001528;
  22. $sideBarWidth: 210px;
  24. $settingPanelWidth: 260px;
  25. // 默认主题色
  26. $theme: #409EFF;
  27. // The :export directive is the magic sauce for webpack
  28. // https://mattferderer.com/use-sass-variables-in-typescript-and-javascript
  29. :export {
  30.   menuText: $menuText;
  31.   menuActiveText: $menuActiveText;
  32.   subMenuActiveText: $subMenuActiveText;
  33.   menuBg: $menuBg;
  34.   menuHover: $menuHover;
  35.   subMenuBg: $subMenuBg;
  36.   subMenuHover: $subMenuHover;
  37.   sideBarWidth: $sideBarWidth;
  38.   theme: $theme;
  39.   settingPanelWidth: $settingPanelWidth;
  40. }

src/styles/variables.scss.d.ts

  1. export interface ScssVariables {
  2.   menuText: string;
  3.   menuActiveText: string;
  4.   subMenuActiveText: string;
  5.   menuBg: string;
  6.   menuHover: string;
  7.   subMenuBg: string;
  8.   subMenuHover: string;
  9.   sideBarWidth: string;
  10.   theme: string;
  11.   settingPanelWidth: string;
  12. }
  14. export const variables: ScssVariables
  16. export default variables

2-3 创建settings组件

src/store/modules/settings.ts

  1. <template>
  2.   <div class="drawer-container">
  3.     <div class="drawer-item">
  4.       <span>主题色</span>
  5.        <!-- 主题组件 -->
  6.       <theme-picker />
  7.     </div>
  8.   </div>
  9. </template>
  11. <script lang="ts">
  12. import { defineComponent } from 'vue'
  13. import ThemePicker from '@/components/ThemePicker/index.vue'
  15. export default defineComponent({
  16.   name: 'Settings',
  17.   components: {
  18.     ThemePicker
  19.   }
  20. })
  21. </script>
  23. <style lang="scss" scoped>
  24.   .drawer-container {
  25.     padding: 24px;
  26.     font-size: 14px;
  27.     line-height: 1.5;
  28.     word-wrap: break-word;
  30.     .drawer-item {
  31.       display: flex;
  32.       justify-content: space-between;
  33.       padding: 12px 0;
  34.       font-size: 16px;
  35.       color: rgba(0, 0, 0, .65);
  36.     }
  37.   }
  38. </style>

2-4 创建ThemePicker组件

颜色面板组件

image.png

element.ts导入color picker组件

image.png

  1. import { App } from 'vue'
  2. import {
  3.   locale,
  4.   ElButton,
  5.   ElMessage,
  6.   ElNotification,
  7.   ElMessageBox,
  8.   ElMenu,
  9.   ElMenuItem,
  10.   ElSubmenu,
  11.   ElRow,
  12.   ElCol,
  13.   ElBreadcrumb,
  14.   ElBreadcrumbItem,
  15.   ElTooltip,
  16.   ElDropdown,
  17.   ElDropdownMenu,
  18.   ElDropdownItem,
  19.   ElScrollbar,
  20.   ElDrawer,
  21.   ElColorPicker
  22. } from 'element-plus'
  23. // 默认主题
  24. import 'element-plus/lib/theme-chalk/index.css'
  26. // Element Plus 组件内部默认使用英语
  27. // https://element-plus.gitee.io/#/zh-CN/component/i18n
  28. import lang from 'element-plus/lib/locale/lang/zh-cn'
  29. // Element Plus 直接使用了 Day.js 项目的时间日期国际化设置, 并且会自动全局设置已经导入的 Day.js 国际化配置。
  30. import 'dayjs/locale/zh-cn'
  32. // $ELEMENT size属性类型
  33. export type Size = 'default' | 'medium' | 'small' | 'mini'
  35. interface ElementOptions {
  36.   size: Size
  37. }
  39. export default (app: App, options: ElementOptions): void => {
  40.   locale(lang)
  42.   // 按需导入组件列表
  43.   const components = [
  44.     ElButton,
  45.     ElMessage,
  46.     ElNotification,
  47.     ElMessageBox,
  48.     ElMenu,
  49.     ElMenuItem,
  50.     ElSubmenu,
  51.     ElRow,
  52.     ElCol,
  53.     ElBreadcrumb,
  54.     ElBreadcrumbItem,
  55.     ElTooltip,
  56.     ElDropdown,
  57.     ElDropdownMenu,
  58.     ElDropdownItem,
  59.     ElScrollbar,
  60.     ElDrawer,
  61.     ElColorPicker
  62.   ]
  64.   components.forEach(component => {
  65.     app.component(component.name, component)
  66.   })
  68.   // Vue.prototype 替换为 config.globalProperties
  69.   // 文档说明 https://v3.cn.vuejs.org/guide/migration/global-api.html#vue-prototype-%E6%9B%BF%E6%8D%A2%E4%B8%BA-config-globalproperties
  70.   app.config.globalProperties.$message = ElMessage
  71.   app.config.globalProperties.$notify = ElNotification
  72.   app.config.globalProperties.$confirm = ElMessageBox.confirm
  73.   app.config.globalProperties.$alert = ElMessageBox.alert
  74.   app.config.globalProperties.$prompt = ElMessageBox.prompt
  76.   // 全局配置 https://element-plus.gitee.io/#/zh-CN/component/quickstart#quan-ju-pei-zhi
  77.   // 该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸 small，zIndex 设置弹框的初始 z-index（默认值：2000）。
  78.   app.config.globalProperties.$ELEMENT = {
  79.     size: options.size
  80.   }
  81. }

src/components/ThemePicker/index.vue

  1. <template>
  2.   <el-color-picker
  3.     v-model="theme"
  4.     class="theme-picker"
  5.     :predefine="themeColor"
  6.     popper-class="theme-picker-dropdown"
  7.   />
  8. </template>
  10. <script lang='ts'>
  11. import { defineComponent, ref, computed, watch } from 'vue'
  12. import { useStore } from '@/store'
  13. import { useGenerateTheme } from '@/hooks/useGenerateTheme'
  15. export default defineComponent({
  16.   name: 'ThemePicker',
  17.   setup() {
  18.     const store = useStore()
  19.     // 预设可选颜色
  20.     // eslint-disable-next-line comma-spacing, comma-dangle
  21.     const themeColor = ['#409EFF', '#1890ff', '#304156', '#212121', '#11a983', '#13c2c2', '#6959CD', '#f5222d',]
  22.     // store中获取默认主题色
  23.     const defaultTheme = computed(() => store.state.settings.theme)
  24.     const theme = ref('')
  26.     // 主题生成方法 稍后
  27.     const { generateTheme } = useGenerateTheme()
  29.     // 监听默认样式
  30.     watch(defaultTheme, value => {
  31.       theme.value = value
  32.     }, {
  33.       immediate: true
  34.     })
  37.     // 根据theme选择变化 重新生成主题
  38.     watch(theme, (value) => {
  39.       // 同步store
  40.       store.dispatch('settings/changeSetting', { key: 'theme', value })
  41.        // 根据theme选择变化 重新生成主题
  42.       generateTheme(value)
  43.     })
  45.     return {
  46.       themeColor,
  47.       theme
  48.     }
  49.   }
  50. })
  51. </script>
  53. <style lang="scss">
  54.   .theme-picker {
  55.     height: 26px !important;
  56.     margin-right: 8px;
  57.     .el-color-picker__trigger {
  58.       height: 26px !important;
  59.       width: 26px !important;
  60.       padding: 2px;
  61.     }
  62.   }
  64.   .theme-message,
  65.   .theme-picker-dropdown {
  66.     z-index: 99999 !important;
  67.   }
  69.   .theme-picker-dropdown .el-color-dropdown__link-btn {
  70.     display: none;
  71.   }
  72. </style>

2-5 store中存储theme

创建settings module

src/store/modules/settings.ts

  1. import { MutationTree, ActionTree } from 'vuex'
  2. import variables from '@/styles/variables.scss'
  3. import { IRootState } from '@/store'
  5. export interface ISettingsState {
  6.   theme: string;
  7.   originalStyle: string;
  8. }
  10. // 定义state
  11. const state: ISettingsState = {
  12.   theme: variables.theme,
  13.   originalStyle: '' // 保存element 主题样式文件内容 作为替换模板
  14. }
  16. // 动态key的情况下 根据不同的key 约束对应value
  17. // http://www.voidcn.com/article/p-wtmkdcie-byz.html
  18. type ValueOf<T> = T[keyof T];
  19. interface ISettings { // 约束payload类型
  20.   key: keyof ISettingsState; // 约束为ISettingsState中key
  21.   value: ValueOf<ISettingsState>; // 约束为ISettingsState中value的类型
  22. }
  23. // 定义mutations 通用muation
  24. const mutations: MutationTree<ISettingsState> = {
  25.   CHANGE_SETTING(state, { key, value }: ISettings) {
  26.     if (key in state) {
  27.       (state[key] as ValueOf<ISettingsState>) = value
  28.     }
  29.   }
  30. }
  32. const actions: ActionTree<ISettingsState, IRootState> = {
  33.   changeSetting({ commit }, data) {
  34.     commit('CHANGE_SETTING', data)
  35.   }
  36. }
  38. export default {
  39.   namespaced: true,
  40.   state,
  41.   mutations,
  42.   actions
  43. }

store中缓存settings.theme和settings.originalStyle

image.png
src/store/index.ts

  1. import { InjectionKey } from 'vue'
  2. import { createStore, Store, useStore as baseUseStore } from 'vuex'
  3. import createPersistedState from 'vuex-persistedstate'
  4. import app, { IAppState } from '@/store/modules/app'
  5. import tagsView, { ITagsViewState } from '@/store/modules/tagsView'
  6. import settings, { ISettingsState } from '@/store/modules/settings'
  7. import getters from './getters'
  9. // 模块声明在根状态下
  10. export interface IRootState {
  11.   app: IAppState;
  12.   tagsView: ITagsViewState;
  13.   settings: ISettingsState;
  14. }
  16. // 通过下面方式使用 TypeScript 定义 store 能正确地为 store 提供类型声明。
  17. // https://next.vuex.vuejs.org/guide/typescript-support.html#simplifying-usestore-usage
  18. // eslint-disable-next-line symbol-description
  19. export const key: InjectionKey<Store<IRootState>> = Symbol()
  21. // 对于getters在组件使用时没有类型提示
  22. // 有人提交了pr #1896 为getters创建泛型 应该还未发布
  23. // https://github.com/vuejs/vuex/pull/1896
  24. // 代码pr内容详情
  25. // https://github.com/vuejs/vuex/pull/1896/files#diff-093ad82a25aee498b11febf1cdcb6546e4d223ffcb49ed69cc275ac27ce0ccce
  27. // vuex store持久化 默认使用localstorage持久化
  28. const persisteAppState = createPersistedState({
  29.   storage: window.sessionStorage, // 指定storage 也可自定义
  30.   key: 'vuex_app', // 存储名 默认都是vuex 多个模块需要指定 否则会覆盖
  31.   // paths: ['app'] // 针对app这个模块持久化
  32.   // 只针对app模块下sidebar.opened状态持久化
  33.   paths: ['app.sidebar.opened', 'app.size'] // 通过点连接符指定state路径
  34. })
  36. const persisteSettingsState = createPersistedState({
  37.   storage: window.sessionStorage, // 指定storage 也可自定义
  38.   key: 'vuex_setting', // 存储名 默认都是vuex 多个模块需要指定 否则会覆盖
  39.   // paths: ['app'] // 针对app这个模块持久化
  40.   // 只针对app模块下sidebar.opened状态持久化
  41.   paths: ['settings.theme', 'settings.originalStyle'] // 通过点连接符指定state路径
  42. })
  44. export default createStore<IRootState>({
  45.   plugins: [
  46.     persisteAppState,
  47.     persisteSettingsState
  48.   ],
  49.   getters,
  50.   modules: {
  51.     app,
  52.     tagsView,
  53.     settings
  54.   }
  55. })
  57. // 定义自己的 `useStore` 组合式函数
  58. // https://next.vuex.vuejs.org/zh/guide/typescript-support.html#%E7%AE%80%E5%8C%96-usestore-%E7%94%A8%E6%B3%95
  59. // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
  60. export function useStore () {
  61.   return baseUseStore(key)
  62. }
  64. // vuex持久化 vuex-persistedstate文档说明
  65. // https://www.npmjs.com/package/vuex-persistedstate

getters添加theme

image.png
src/store/getters.ts

  1. import { GetterTree } from 'vuex'
  2. import { IRootState } from './index'
  4. // 定义全局getters
  5. const getters: GetterTree<IRootState, IRootState> = {
  6.   sidebar: (state) => state.app.sidebar,
  7.   size: state => state.app.size,
  8.   themeColor: state => state.settings.theme
  9. }
  11. export default getters

2-6 主题生成逻辑

最开始需要在App.vue中调用生成主题hooks useGenerateTheme ThemePicker组件里也要调用 useGenerateTheme 更好选择的主题颜色 生成主题

src/App.vue

  1. <template>
  2.   <div id="app">
  3.     <router-view />
  4.   </div>
  5. </template>
  7. <script lang="ts">
  8. import { defineComponent } from 'vue'
  9. import { useGenerateTheme } from '@/hooks/useGenerateTheme'
  11. export default defineComponent({
  12.   name: 'App',
  13.   setup() {
  14.     // 根据此时store中主题色生成
  15.     useGenerateTheme()
  16.   }
  17. })
  18. </script>
  20. <style>
  21. #app {
  22.   height: 100%;
  23. }
  24. </style>

创建useGenerateTheme Hook函数

src目录下创建hooks文件夹
image.png
src/utils/useGenerateTheme.ts

  1. import { computed } from 'vue'
  2. import { useThemeFiles } from '@/hooks/useThemeFiles'
  3. import { getStyleTemplate } from '@/utils/getStyleTemplate'
  4. import { generateColors } from '@/utils/color'
  5. import { writeNewStyle } from '@/utils/writeNewStyle'
  6. import { useStore } from '@/store'
  8. export const useGenerateTheme = () => {
  9.   const store = useStore()
  10.   // 从store获取中获取 theme主题色
  11.   const defaultTheme = computed(() => store.state.settings.theme)
  12.   // 获取element-ui 主题文件内容 通过axios获取的 作为变量替换模板
  13.   const originalStyle = computed(() => store.state.settings.originalStyle)
  14.   // 生成主题
  15.   // 了解element ui 设计 https://juejin.cn/post/6844903960218697741
  16.   const generateTheme = (color: string) => {
  17.     const colors = Object.assign({
  18.       primary: defaultTheme.value
  19.     }, generateColors(color))
  20.     // 写入新的css样式
  21.     writeNewStyle(originalStyle.value, colors)
  22.   }
  23.   // 第一步 远程获取element-ui 主题文件作为模板 然后进行变量替换 替换成我们所选主题色
  24.   const { getThemeChalkStyle } = useThemeFiles()
  25.   // 如果主题模板不存在 就要发送请求获取
  26.   if (!originalStyle.value) {
  27.     // axios请求后去 主题模板
  28.     getThemeChalkStyle().then(data => {
  29.       // data是获取到主题文件的css内容
  30.       // 生成样式模板 将里面css内容里默认主题颜色值 替换成变量标记 如 '#409eff' => 'primary',
  31.       // 方便我们后续 把primary字符标记 换成我们的主题色
  32.       const styleValue = getStyleTemplate(data as string)
  33.       // 把模板保存到 store中缓存起来 不用每次重新获取
  34.       store.dispatch('settings/changeSetting', { key: 'originalStyle', value: styleValue })
  35.       // 根据主题色生成主题 插入到html中
  36.       generateTheme(defaultTheme.value)
  37.     })
  38.   } else {
  39.     generateTheme(defaultTheme.value)
  40.   }
  41.   return {
  42.     generateTheme
  43.   }
  44. }

创建useThemeFiles hooks函数

主要是为了远程获取 elment-ui theme index.css

image.png
src/hooks/useThemeFiles.ts

  1. import { useFetch } from './useFetch'
  2. import pkgJson from 'element-plus/package.json'
  4. // 获取element-plus版本
  5. const version = pkgJson.version
  7. interface ReturnFn {
  8.   getThemeChalkStyle: () => Promise<unknown>
  9. }
  10. export const useThemeFiles = ():ReturnFn => {
  11.   const getThemeChalkStyle = async (): Promise<unknown> => {
  12.     // 返回获取到的指定版本的element主题css内容
  13.     // return await useFetch('//unpkg.com/element-plus@1.0.2-beta.33/lib/theme-chalk/index.css')
  14.     return await useFetch(`//unpkg.com/element-plus@${version}/lib/theme-chalk/index.css`)
  15.   }
  17.   return {
  18.     getThemeChalkStyle
  19.   }
  20. }

上面ts中导入了json文件 需要配置tsconfig

添加”resolveJsonModule”: true即可

image.png

创建useFetch请求hook函数

image.png
src/hooks/useFetch.ts

  1. import axios from 'axios'
  3. const useFetch = async (url: string): Promise<unknown> => {
  4.   return await new Promise((resolve, reject) => {
  5.     axios({
  6.       url,
  7.       method: 'get'
  8.     }).then(res => {
  9.       if (res.status === 200) {
  10.         resolve(res.data)
  11.       } else {
  12.         reject(new Error(res.statusText))
  13.       }
  14.     }).catch(err => {
  15.       reject(new Error(err.message))
  16.     })
  17.   })
  18. }
  20. export {
  21.   useFetch
  22. }

生成最终的样式模板

主要就是把获取到默认主题css内容 替换成变量标记，后续作为模板替换为我们想要的主题色和渐变色

  1. export interface IObject {
  2.   [prop: string]: string
  3. }
  5. // element ui 关于以下颜色设计阅读资料
  6. // https://juejin.cn/post/6844903960218697741
  7. // 官方文档说明
  8. // https://element-plus.gitee.io/#/zh-CN/component/custom-theme
  9. // element-plus ui每套主题 共用到以下多种颜色 根据根据白色和主题色进行混合生成渐变色
  10. // Mix 函数是将两种颜色根据一定的比例混合在一起，生成另一种颜色
  11. // $--color-primary: #409EFF !default;
  12. // $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
  13. // $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
  14. // $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
  15. // $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
  16. // $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
  17. // $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
  18. // $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
  19. // $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
  20. // $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
  21. // 根据样式内容生成样式模板
  22. export const getStyleTemplate = (data: string): string => {
  23.   // 这些是我们要把key也就是css内容中颜色值 替换成右边value作为变量标记 后续我们之关系右边value这些变量标记
  24.   const colorMap: IObject = {
  25.     '#3a8ee6': 'shade-1',
  26.     '#409eff': 'primary',
  27.     '#53a8ff': 'light-1',
  28.     '#66b1ff': 'light-2',
  29.     '#79bbff': 'light-3',
  30.     '#8cc5ff': 'light-4',
  31.     '#a0cfff': 'light-5',
  32.     '#b3d8ff': 'light-6',
  33.     '#c6e2ff': 'light-7',
  34.     '#d9ecff': 'light-8',
  35.     '#ecf5ff': 'light-9'
  36.   }
  37.   Object.keys(colorMap).forEach(key => {
  38.     const value = colorMap[key]
  39.     // 将key对应的颜色值 替换成 右边对应value primary list-1这些 后续生成主题 作为替换变量标记使用
  40.     data = data.replace(new RegExp(key, 'ig'), value)
  41.   })
  42.   return data // 返回css字符串模板 之后主要靠它用我们所选的主题色 渐变色 把里面 变量标记替换掉生成主题css
  43. }

generateTheme生成主题函数

这个函数直接定义在了useGenerateTheme Hook中 并返回到外面 供其他组件使用

image.png
generateTheme函数

  1.   // 生成主题
  2.   // element ui 设计 https://juejin.cn/post/6844903960218697741
  3.   const generateTheme = (color: string) => {
  4.     const colors = Object.assign({
  5.       primary: defaultTheme.value
  6.     }, generateColors(color))
  7.     // 动态创建style标签挂载到html中 并写入新的css样式
  8.     writeNewStyle(originalStyle.value, colors)
  9.   }

src/utils/useGenerateTheme.ts

  1. import { computed } from 'vue'
  2. import { useThemeFiles } from '@/hooks/useThemeFiles'
  3. import { getStyleTemplate } from '@/utils/getStyleTemplate'
  4. import { generateColors } from '@/utils/color'
  5. import { writeNewStyle } from '@/utils/writeNewStyle'
  6. import { useStore } from '@/store'
  8. export const useGenerateTheme = () => {
  9.   const store = useStore()
  10.   const defaultTheme = computed(() => store.state.settings.theme)
  11.   const originalStyle = computed(() => store.state.settings.originalStyle)
  12.   // 生成主题
  13.   // element ui 设计 https://juejin.cn/post/6844903960218697741
  14.   const generateTheme = (color: string) => {
  15.     const colors = Object.assign({
  16.       primary: defaultTheme.value
  17.     }, generateColors(color))
  18.     // 写入新的css样式
  19.     writeNewStyle(originalStyle.value, colors)
  20.   }
  21.   // 第一步 远程获取element-ui 主题文件作为模板 然后进行变量替换 替换成我们所选主题色
  22.   const { getThemeChalkStyle } = useThemeFiles()
  23.   if (!originalStyle.value) {
  24.     getThemeChalkStyle().then(data => {
  25.       // data是主题文件的css内容
  26.       const styleValue = getStyleTemplate(data as string)
  27.       store.dispatch('settings/changeSetting', { key: 'originalStyle', value: styleValue })
  28.       generateTheme(defaultTheme.value)
  29.     })
  30.   } else {
  31.     generateTheme(defaultTheme.value)
  32.   }
  33.   return {
  34.     generateTheme
  35.   }
  36. }

generateColors函数

generateTheme函数 里会调用此函数

image.png
src/utils/color.ts

  1. import color from 'css-color-function'
  2. import { formula, IObject } from './constants'
  4. // 转换成不同色调的rgb颜色值
  5. // https://www.w3cplus.com/css/the-power-of-rgba.html
  6. export const generateColors = (primary: string): IObject => {
  7.   const colors = {} as IObject
  8.   Object.keys(formula).forEach(key => {
  9.     // element ui 主题色 渐变色设计 https://juejin.cn/post/6844903960218697741
  10.     // 根据主题色生成渐变色 将formula对象中字符primary 替换成我们所选的主题色
  11.     const value = formula[key].replace(/primary/g, primary)
  12.     colors[key] = color.convert(value) // 转换成rgba颜色值
  13.   })
  14.   return colors
  15. }
  17. // 主题色的渐变色设计 https://juejin.cn/post/6844903960218697741
  18. // color-mod css颜色函数
  19. // https://www.w3cplus.com/css4/color-mod.html
  20. // export const formula: IObject = {
  21. //   'shade-1': 'color(primary shade(10%))',
  22. //   'light-1': 'color(primary tint(10%))',
  23. //   'light-2': 'color(primary tint(20%))',
  24. //   'light-3': 'color(primary tint(30%))',
  25. //   'light-4': 'color(primary tint(40%))',
  26. //   'light-5': 'color(primary tint(50%))',
  27. //   'light-6': 'color(primary tint(60%))',
  28. //   'light-7': 'color(primary tint(70%))',
  29. //   'light-8': 'color(primary tint(80%))',
  30. //   'light-9': 'color(primary tint(90%))'
  31. // }

constants变量

src/utils/constants.ts

  1. export interface IObject {
  2.   [prop: string]: string;
  3. }
  5. // 主题色的渐变色设计 https://juejin.cn/post/6844903960218697741
  6. // color-mod css颜色函数
  7. // https://www.w3cplus.com/css4/color-mod.html
  8. export const formula: IObject = {
  9.   'shade-1': 'color(primary shade(10%))',
  10.   'light-1': 'color(primary tint(10%))',
  11.   'light-2': 'color(primary tint(20%))',
  12.   'light-3': 'color(primary tint(30%))',
  13.   'light-4': 'color(primary tint(40%))',
  14.   'light-5': 'color(primary tint(50%))',
  15.   'light-6': 'color(primary tint(60%))',
  16.   'light-7': 'color(primary tint(70%))',
  17.   'light-8': 'color(primary tint(80%))',
  18.   'light-9': 'color(primary tint(90%))'
  19. }

writeNewStyle函数

generateTheme函数 里会调用此函数 插入style到html中

image.png
src/utils/writeNewStyle.ts

  1. import { IObject } from './constants'
  3. // 写入新的css样式
  4. export const writeNewStyle = (originalStyle: string, colors: IObject): void => {
  5.   Object.keys(colors).forEach(key => {
  6.     // 根据模板将之前变量标记替换成颜色值
  7.     const reg = new RegExp('(:|\\s+)' + key, 'g')
  8.     originalStyle = originalStyle.replace(reg, '$1' + colors[key])
  9.   })
  10.   // 之前有插入过id名为chalk-theme-style style元素就直接重新里面内容 没有就动态创建style并加上id
  11.   const chalkStyle = document.getElementById('chalk-theme-style')
  12.   if (!chalkStyle) {
  13.     const style = document.createElement('style')
  14.     style.innerText = originalStyle
  15.     style.id = 'chalk-theme-style'
  16.     // 插入到head中
  17.     document.head.appendChild(style)
  18.   } else {
  19.     (chalkStyle as HTMLElement).innerText = originalStyle
  20.   }
  21. }

2-7 修改tagviews组件使用主题色

image.png
src/layout/components/TagsView/index.vue

  1. <template>
  2.   <div class="tags-view-container">
  3.     <scroll-panel>
  4.       <div class="tags-view-wrapper">
  5.           <router-link
  6.             class="tags-view-item"
  7.             :class="{
  8.               active: isActive(tag)
  9.             }"
  10.             :style="{
  11.               backgroundColor: isActive(tag) ? themeColor : '',
  12.               borderColor: isActive(tag) ? themeColor : ''
  13.             }"
  14.             v-for="(tag, index) in visitedTags"
  15.             :key="index"
  16.             :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
  17.             tag="span"
  18.           >
  19.             <el-dropdown
  20.               trigger="contextmenu"
  21.               @command="command => handleTagCommand(command, tag)">
  22.               <span>
  23.                 {{ tag.meta.title }}
  24.                 <!-- affix固定的路由tag是无法删除 -->
  25.                 <span
  26.                   v-if="!isAffix(tag)"
  27.                   class="el-icon-close"
  28.                   @click.prevent.stop="closeSelectedTag(tag)"
  29.                 ></span>
  30.               </span>
  31.               <template #dropdown>
  32.                 <el-dropdown-menu>
  33.                   <el-dropdown-item command="refresh">刷新</el-dropdown-item>
  34.                   <el-dropdown-item command="all">关闭所有</el-dropdown-item>
  35.                   <el-dropdown-item command="other">关闭其他</el-dropdown-item>
  36.                   <el-dropdown-item command="self" v-if="!tag.meta || !tag.meta.affix">关闭</el-dropdown-item>
  37.                 </el-dropdown-menu>
  38.               </template>
  39.             </el-dropdown>
  40.           </router-link>
  41.       </div>
  42.     </scroll-panel>
  43.   </div>
  44. </template>
  46. <script lang="ts">
  47. import path from 'path'
  48. import { defineComponent, computed, watch, onMounted, nextTick } from 'vue'
  49. import { useRoute, RouteRecordRaw, useRouter } from 'vue-router'
  50. import { useStore } from '@/store'
  51. import { RouteLocationWithFullPath } from '@/store/modules/tagsView'
  52. import { routes } from '@/router'
  53. import ScrollPanel from './ScrollPanel.vue'
  55. // 右键菜单
  56. enum TagCommandType {
  57.   All = 'all',
  58.   Other = 'other',
  59.   Self = 'self',
  60.   Refresh = 'refresh'
  61. }
  63. export default defineComponent({
  64.   name: 'TagsView',
  65.   components: {
  66.     ScrollPanel
  67.   },
  68.   setup() {
  69.     const store = useStore()
  70.     const router = useRouter()
  71.     const route = useRoute()
  72.     // 可显示的tags view
  73.     const visitedTags = computed(() => store.state.tagsView.visitedViews)
  74.     // 从路由表中过滤出要affixed tagviews
  75.     const fillterAffixTags = (routes: Array<RouteLocationWithFullPath | RouteRecordRaw>, basePath = '/') => {
  76.       let tags: RouteLocationWithFullPath[] = []
  77.       routes.forEach(route => {
  78.         if (route.meta && route.meta.affix) {
  79.           // 把路由路径解析成完整路径，路由可能是相对路径
  80.           const tagPath = path.resolve(basePath, route.path)
  81.           tags.push({
  82.             name: route.name,
  83.             path: tagPath,
  84.             fullPath: tagPath,
  85.             meta: { ...route.meta }
  86.           } as RouteLocationWithFullPath)
  87.         }
  89.         // 深度优先遍历 子路由（子路由路径可能相对于route.path父路由路径）
  90.         if (route.children) {
  91.           const childTags = fillterAffixTags(route.children, route.path)
  92.           if (childTags.length) {
  93.             tags = [...tags, ...childTags]
  94.           }
  95.         }
  96.       })
  97.       return tags
  98.     }
  100.     // 初始添加affix的tag
  101.     const initTags = () => {
  102.       const affixTags = fillterAffixTags(routes)
  103.       for (const tag of affixTags) {
  104.         if (tag.name) {
  105.           store.dispatch('tagsView/addVisitedView', tag)
  106.         }
  107.       }
  108.     }
  110.     // 添加tag
  111.     const addTags = () => {
  112.       const { name } = route
  113.       if (name) {
  114.         store.dispatch('tagsView/addView', route)
  115.       }
  116.     }
  118.     // 路径发生变化追加tags view
  119.     watch(() => route.path, () => {
  120.       addTags()
  121.     })
  123.     // 最近当前router到tags view
  124.     onMounted(() => {
  125.       initTags()
  126.       addTags()
  127.     })
  129.     // 当前是否是激活的tag
  130.     const isActive = (tag: RouteRecordRaw) => {
  131.       return tag.path === route.path
  132.     }
  134.     // 让删除后tags view集合中最后一个为选中状态
  135.     const toLastView = (visitedViews: RouteLocationWithFullPath[], view: RouteLocationWithFullPath) => {
  136.       // 得到集合中最后一个项tag view 可能没有
  137.       const lastView = visitedViews[visitedViews.length - 1]
  138.       if (lastView) {
  139.         router.push(lastView.fullPath as string)
  140.       } else { // 集合中都没有tag view时
  141.         // 如果刚刚删除的正是Dashboard 就重定向回Dashboard（首页）
  142.         if (view.name === 'Dashboard') {
  143.           router.replace({ path: '/redirect' + view.fullPath as string })
  144.         } else {
  145.           // tag都没有了 删除的也不是Dashboard 只能跳转首页
  146.           router.push('/')
  147.         }
  148.       }
  149.     }
  151.     // 关闭当前右键的tag路由
  152.     const closeSelectedTag = (view: RouteLocationWithFullPath) => {
  153.       // 关掉并移除view
  154.       store.dispatch('tagsView/delView', view).then(() => {
  155.         // 如果移除的view是当前选中状态view, 就让删除后的集合中最后一个tag view为选中态
  156.         if (isActive(view)) {
  157.           toLastView(visitedTags.value, view)
  158.         }
  159.       })
  160.     }
  162.     // 是否是始终固定在tagsview上的tag
  163.     const isAffix = (tag: RouteLocationWithFullPath) => {
  164.       return tag.meta && tag.meta.affix
  165.     }
  167.     // 右键菜单
  168.     const handleTagCommand = (command: TagCommandType, view: RouteLocationWithFullPath) => {
  169.       switch (command) {
  170.         case TagCommandType.All: // 右键删除标签导航所有tag 除了affix为true的
  171.           handleCloseAllTag(view)
  172.           break
  173.         case TagCommandType.Other: // 关闭其他tag 除了affix为true的和当前右键的tag
  174.           handleCloseOtherTag(view)
  175.           break
  176.         case TagCommandType.Self: // 关闭当前右键的tag affix为true的tag下拉菜单中无此项
  177.           closeSelectedTag(view)
  178.           break
  179.         case TagCommandType.Refresh: // 刷新当前右键选中tag对应的路由
  180.           refreshSelectedTag(view)
  181.       }
  182.     }
  184.     // 删除所有tag 除了affix为true的
  185.     const handleCloseAllTag = (view: RouteLocationWithFullPath) => {
  186.       // 对于是affix的tag是不会被删除的
  187.       store.dispatch('tagsView/delAllView').then(() => {
  188.         // 关闭所有后 就让切换到剩下affix中最后一个tag
  189.         toLastView(visitedTags.value, view)
  190.       })
  191.     }
  193.     // 删除其他tag 除了当前右键的tag
  194.     const handleCloseOtherTag = (view: RouteLocationWithFullPath) => {
  195.       store.dispatch('tagsView/delOthersViews', view).then(() => {
  196.         if (!isActive(view)) { // 删除其他tag后 让该view路由激活
  197.           router.push(view.path)
  198.         }
  199.       })
  200.     }
  202.     // 右键刷新 清空当前对应路由缓存
  203.     const refreshSelectedTag = (view: RouteLocationWithFullPath) => {
  204.       // 刷新前 将该路由名称从缓存列表中移除
  205.       store.dispatch('tagsView/delCachedView', view).then(() => {
  206.         const { fullPath } = view
  207.         nextTick(() => {
  208.           router.replace('/redirect' + fullPath)
  209.         })
  210.       })
  211.     }
  213.     // 获取主题色
  214.     const themeColor = computed(() => store.getters.themeColor)
  216.     return {
  217.       visitedTags,
  218.       isActive,
  219.       closeSelectedTag,
  220.       isAffix,
  221.       handleTagCommand,
  222.       themeColor
  223.     }
  224.   }
  225. })
  226. </script>
  228. <style lang="scss" scoped>
  229. .tags-view-container {
  230.   height: 34px;
  231.   background: #fff;
  232.   border-bottom: 1px solid #d8dce5;
  233.   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
  234.   overflow: hidden;
  235.   .tags-view-wrapper {
  236.     .tags-view-item {
  237.       display: inline-block;
  238.       height: 26px;
  239.       line-height: 26px;
  240.       border: 1px solid #d8dce5;
  241.       background: #fff;
  242.       color: #495060;
  243.       padding: 0 8px;
  244.       box-sizing: border-box;
  245.       font-size: 12px;
  246.       margin-left: 5px;
  247.       margin-top: 4px;
  248.       &:first-of-type {
  249.         margin-left: 15px;
  250.       }
  251.       &:last-of-type {
  252.         margin-right: 15px;
  253.       }
  254.       &.active {
  255.         background-color: #409EFF;
  256.         color: #fff;
  257.         border-color: #409EFF;
  258.         ::v-deep {
  259.           .el-dropdown {
  260.             color: #fff;
  261.           }
  262.         }
  263.         &::before {
  264.           position: relative;
  265.           display: inline-block;
  266.           content: '';
  267.           width: 8px;
  268.           height: 8px;
  269.           border-radius: 50%;
  270.           margin-right: 5px;
  271.           background: #fff;
  272.         }
  273.       }
  274.     }
  275.   }
  276. }
  277. </style>
  279. <style lang="scss">
  280. .tags-view-container {
  281.   .el-icon-close {
  282.     width: 16px;
  283.     height: 16px;
  284.     vertical-align: 2px;
  285.     border-radius: 50%;
  286.     text-align: center;
  287.     transition: all .3s cubic-bezier(.645, .045, .355, 1);
  288.     transform-origin: 100% 50%;
  289.     &:before {
  290.       transform: scale(.6);
  291.       display: inline-block;
  292.       vertical-align: -3px;
  293.     }
  294.     &:hover {
  295.       background-color: #b4bccc;
  296.       color: #fff;
  297.     }
  298.   }
  299. }
  301. </style>

2-8 修改sidebar使用主题色

image.png
src/layout/components/Sidebar/index.vue

  1. <template>
  2.   <div>
  3.     <el-menu
  4.       class="sidebar-container-menu"
  5.       mode="vertical"
  6.       :default-active="activeMenu"
  7.       :background-color="scssVariables.menuBg"
  8.       :text-color="scssVariables.menuText"
  9.       :active-text-color="themeColor"
  10.       :collapse="isCollapse"
  11.       :collapse-transition="true"
  12.     >
  13.       <sidebar-item
  14.         v-for="route in menuRoutes"
  15.         :key="route.path"
  16.         :item="route"
  17.         :base-path="route.path"
  18.       />
  19.     </el-menu>
  20.   </div>
  21. </template>
  23. <script lang="ts">
  24. import { defineComponent, computed } from 'vue'
  25. import { useRoute } from 'vue-router'
  26. import variables from '@/styles/variables.scss'
  27. import { routes } from '@/router'
  28. import SidebarItem from './SidebarItem.vue'
  29. import { useStore } from '@/store'
  31. export default defineComponent({
  32.   name: 'Sidebar',
  33.   components: {
  34.     SidebarItem
  35.   },
  36.   setup() {
  37.     const route = useRoute()
  38.     const store = useStore()
  39.     // 根据路由路径 对应 当前激活的菜单
  40.     const activeMenu = computed(() => {
  41.       const { path, meta } = route
  42.       // 可根据meta.activeMenu指定 当前路由激活时 让哪个菜单高亮选中
  43.       if (meta.activeMenu) {
  44.         return meta.activeMenu
  45.       }
  46.       return path
  47.     })
  48.     // scss变量
  49.     const scssVariables = computed(() => variables)
  50.     // 展开收起状态 稍后放store 当前是展开就让它收起
  51.     const isCollapse = computed(() => !store.getters.sidebar.opened)
  53.     // 渲染路由
  54.     const menuRoutes = computed(() => routes)
  56.     // 获取主题色
  57.     const themeColor = computed(() => store.getters.themeColor)
  59.     return {
  60.       // ...toRefs(variables), // 不有toRefs原因 缺点variables里面变量属性来源不明确
  61.       scssVariables,
  62.       isCollapse,
  63.       activeMenu,
  64.       menuRoutes,
  65.       themeColor
  66.     }
  67.   }
  68. })
  69. </script>

2-9 element.ts

可以注释掉了，因为我们会根据store里默认theme值生成内联css

src/plugins/element.ts
image.png

本节参考源码

这里注意 utils/useGenerateTheme.ts移到hooks目录里 文档中是正确的
https://gitee.com/brolly/vue3-element-admin/commit/1a074ecd1e6855241860a287cf1bede38006c684
移动commit
https://gitee.com/brolly/vue3-element-admin/commit/52195d3285cf0aa71919af1bbea34e22e53cc53b
image.png