签入版本
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
# 9.14 样式与主题定制
|
||||
|
||||
:::tip 概述
|
||||
样式体系基于 Element Plus CSS 变量 + styles/ 全局覆盖:主题色、暗黑模式、水印、动画等经 designSetting/projectSetting 在线配置。定制优先走变量覆盖而非逐组件覆盖。
|
||||
样式体系基于 ElementPlus CSS 变量 + styles/ 全局覆盖:主题色、暗黑模式、水印、动画等经 designSetting/projectSetting 在线配置。定制优先走变量覆盖而非逐组件覆盖。
|
||||
:::
|
||||
|
||||
## 样式目录(src/styles/)
|
||||
@@ -10,22 +10,22 @@
|
||||
styles/
|
||||
├── index.less / index.scss 入口样式
|
||||
├── variables.* SCSS/Less 变量
|
||||
├── element/ Element Plus 变量覆盖
|
||||
├── element/ ElementPlus 变量覆盖
|
||||
├── public/ 公共样式
|
||||
└── ...
|
||||
```
|
||||
|
||||
main.ts 引入顺序:Element Plus 样式 → 变量覆盖 → 全局样式(覆盖生效)。
|
||||
main.ts 引入顺序:ElementPlus 样式 → 变量覆盖 → 全局样式(覆盖生效)。
|
||||
|
||||
## 主题定制机制
|
||||
|
||||
```text
|
||||
Element Plus 暴露 CSS 变量(--el-color-primary 等):
|
||||
ElementPlus 暴露 CSS 变量(--el-color-primary 等):
|
||||
styles/ 覆盖变量根值 → 全组件生效
|
||||
|
||||
运行时主题切换(designSetting store):
|
||||
主题色在线更换 → 动态更新 CSS 变量 / 主题类名
|
||||
暗黑模式:html 挂 dark 类 → Element Plus dark 变量集
|
||||
暗黑模式:html 挂 dark 类 → ElementPlus dark 变量集
|
||||
灰度/色弱:filter 类名
|
||||
```
|
||||
|
||||
@@ -50,7 +50,7 @@ designSetting 开关 + 文案 → 布局层渲染水印(canvas/css)
|
||||
## 页面样式规约
|
||||
|
||||
```text
|
||||
1. 优先用 Element Plus 组件与 CSS 变量(勿直接写死颜色值)
|
||||
1. 优先用 ElementPlus 组件与 CSS 变量(勿直接写死颜色值)
|
||||
2. 页面 scoped 样式(<style scoped>);跨页公共样式进 styles/public
|
||||
3. 主题相关颜色用 var(--el-color-*)(随主题切换自动适配)
|
||||
4. 少用 deep 选择器覆盖(Element 升级易碎);确需覆盖集中在 element/ 目录
|
||||
|
||||
Reference in New Issue
Block a user