vue3 中主题定制

推开世界的门

已于 2024-03-01 18:39:46 修改

阅读量650

点赞数 7

分类专栏：公司项目相关文章标签： vue.js 前端 javascript

于 2024-03-01 18:25:16 首次发布

本文链接：https://blog.csdn.net/qq_38845858/article/details/136400353

版权

公司项目相关专栏收录该内容

84 篇文章 4 订阅

订阅专栏

本文介绍了如何在Vue3项目中实现主题定制功能，包括使用store管理主题状态、动态导入主题文件、根据主题文件内容设置CSS变量以及利用Pinia库进行状态持久化。核心部分涉及初始化时设置主题、主题文件的匹配和样式替换以及主题变更的监听和操作。

摘要由CSDN通过智能技术生成

vue3 中主题定制

背景

做多主题定制，黑/白，里面还要再分各种颜色，每次进来都要记住上次的主题设置

效果图

在这里插入图片描述

一、目录结构

├── generated
│   ├── theme  
│   │   └── dark-yellow.ts
│   │   └── dark-orange.ts
│   │   └── light-yellow.ts
│   │   └── light-orange.ts
│   │   └── theme.enums.ts
├── stores 
│   ├── theme-store.ts

数据结构

主题
在这里插入图片描述
枚举

二、流程

Init的时候，根据 store 中的颜色主题，先做一次匹配，changeTheme
切换主题的时候，监听绑定的值，做 changeTheme
changeTheme 主要就是读取文件列表，做匹配，做规则制定，最后使用 document.documentElement.style.setProperty 设置style,根据css 变量做匹配

三、核心实现

init 时，设置已存储的theme

import { setupTheme } from '@/stores/theme-store'
const app = createApp(App)
initApp(app)


const initApp = async (app: App) => {
  setupStore(app)
  setupRouter(app)
  setupLang(app)
  setupTheme()
  app.mount('#app')
}

读取配置主题文件(匹配到的文件默认是懒加载的，通过动态导入实现eager: true)

const themeFileList: Record<string, string> = import.meta.glob(
  ['@/generated/theme/*.ts', '!@/generated/theme/theme.enums.ts'],
  {
    import: 'default',
    eager: true
  }
)

在这里插入图片描述

根据文件夹匹配出主题key

const themeFileListObject = {}
for (const key in themeFileList) {
  const filename = key.split('/').pop()?.replace('.ts', '')
  if (filename) {
    themeFileListObject[filename] = themeFileList[key]
  }
}

在这里插入图片描述

替换root 样式(根据存储key匹配出当前色值表，format css name，then set style)

const injectRootStyle = (theme: ThemeEnum) => {
  const themeObject = themeFileListObject[theme]
  for (const key in themeObject) {
    const cssVariableName = `--${key.replace(/_/g, '-').toLowerCase()}`
    document.documentElement.style.setProperty(cssVariableName, themeObject[key])
  }
}

在这里插入图片描述

Pian 中做数据监听，data change to call changeTheme function.

watch(theme, (nVal) => {
      changeTheme(nVal)
})
// 改变主题
const changeTheme = (theme: ThemeEnum) => {
  injectRootStyle(theme)
}
//设置主题
const setupTheme = () => {
  changeTheme(useThemeStore().theme)
}

四、总体代码

import ThemeEnum from '@/generated/theme/theme-enum'
import { defineStore } from 'pinia'
import { ref, watch } from 'vue'

// 读取全部主题配置
const themeFileList: Record<string, string> = import.meta.glob(
  ['@/generated/theme/*.ts', '!@/generated/theme/theme.enums.ts'],
  {
    import: 'default',
    eager: true
  }
)

// 根据读取的文件路径，生成名称和地址
const themeFileListObject = {}
for (const key in themeFileList) {
  const filename = key.split('/').pop()?.replace('.ts', '')
  if (filename) {
    themeFileListObject[filename] = themeFileList[key]
  }
}

// 注入根样式
const injectRootStyle = (theme: ThemeEnum) => {
  const themeObject = themeFileListObject[theme]
  for (const key in themeObject) {
    const cssVariableName = `--${key.replace(/_/g, '-').toLowerCase()}`
    document.documentElement.style.setProperty(cssVariableName, themeObject[key])
  }
}

// 定义一个函数，用于改变主题
const changeTheme = (theme: ThemeEnum) => {
  // 注入根样式
  injectRootStyle(theme)
}

// 定义一个函数，用于设置主题
const setupTheme = () => {
  // 改变主题
  changeTheme(useThemeStore().theme)
}

const useThemeStore = defineStore(
  'theme',
  () => {
    const theme = ref(ThemeEnum['light-red'])

    watch(theme, (nVal) => {
      changeTheme(nVal)
    })

    return { theme }
  },
  { persist: true }
)

export { setupTheme, changeTheme, useThemeStore }