首页 前端知识 vue3 vite 前端项目主题切换(ECharts、Element Plus、图片、icon图标)解决方案

vue3 vite 前端项目主题切换(ECharts、Element Plus、图片、icon图标)解决方案

2024-06-17 09:06:34 前端知识 前端哥 75 76 我要收藏

说明

  • 此方案使用var变量+class控制主题,并针对在修改主题时无法使用var变量控制的组件如:ECharts
  • 仅适用于vite项目(功能依赖于vite-var仓库)
  • 最终效果:对项目中的样式、iconfont图标、图片、ECharts图表、ui库进行主题的无缝切换

示例地址:在vue3+typescript-vite进行主题切换

效果预览

动画.gif

目录结构

.
├─ build # 预处理
│   │
│   ├─config # vite配置处理
│   │   ├─ build # 打包配置
│   │   └─ plugins # 插件管理(重要)
│   └─env # 环境变量管理
│       ├─ theme # 主题文件夹 (重要)
│       │    ├─light.ts # 明亮主题
│       │    └─dark.ts # 阴暗主题
│       └─ _var # 变量定义  (重要)
│
├─ src
│   │
│   ├─components # 组件目录
│   │   ├─ sicon # 图标组件
│   │   │    └─index.vue
│   │   └─ chart # 图表组件
│   │        └─line.vue # 线图
│   │
│   ├─views # 页面
│   │   └─ home # 示例页面(重要)
│   │        └─index.vue
│   │
│   └─utils # 工具类
│       ├─ System # 管理echarts
│       └─ Theme # 管理主题(重要)
│
├─ .gitignore
├─ .prettierignore
├─ .prettierrc
├─ index.html
├─ package.json
├─ README.md
├─ tsconfig.json
└─ vite.config.ts

  • 示例和使用
    0.png

设计思路

初期是直接使用var+class进行控制,后面发现在不能使用var变量时,需要进行再次定义一遍颜色,因为懒得再写所以引入了插件进行预处理**,在使用时不需要再去写一次颜色的值,结合UI使用figma软件给到的变量和颜色,可以快速的修改和新增主题

  • 定义主题方案:进入build/env/theme目录定义主题文件如图,然后在build/env/theme/index.ts引入即可

1.png
2.png

  • 用于样式中时:在src/styles/theme目录中创建主题文件如图,然后在main.ts中引入即可

3.png
4.png

  • 用于EChart时:在Theme.chart中定义方法和变量,然后在组件中传入该方法为颜色参数即可,为什么定义成方法?方便在图表更新时获取当前主题配置,可以作为颜色参数传入

5.png

  • 用于iconfont图标:直接修改sicon组件的color值即可
  • 用于图片:使用v-bind对src属性中的目录使用Theme.use控制即可

上面使用了字符串如//#{style.dark}、#{light.c-blue}等,这些是插件vite-var全局的变量写法,适用于所有类型的文件,在运行或者打包时插件会进行处理,将我们上面定义的ts主题文件中的内容进行转换(不理解的可以打印变量查看编译前后的差异)

注意:在用var使用时如var(–c-primary),需要加上–,而在全局变量中不需要加上–,如#{light.c-blue},当然想加的可以自己改造

结尾

欢迎有更好的想法的小伙伴提出建议和意见,因为懒,所以才做了这些东西~我认为目前这些还是可以提升开发的效率、UI方面转换时间和后期的维护速度!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12481.html
标签
less
评论
发布的文章

HTML5 新增元素

2024-06-22 10:06:20

【前端】HTML5基础

2024-06-22 10:06:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!