Home Explore Help
Register Sign In
licong
/
Bolin-DESIGN.md
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: 13c9f05ba9
Branches Tags
Bolin-DESIGN...
/
DESIGN-SYSTEM.md

DESIGN-SYSTEM.md 49 KB
History Raw

Element Plus 设计系统规范

基于 Element Plus 2.13.6 版本 本文档作为项目设计的唯一真理来源（Single Source of Truth）

目录

基础设计变量

基础组件

配置组件

表单组件

数据展示

导航组件

反馈组件

其他组件

基础设计变量

颜色系统

主色

变量名 Hex 值 用途说明
--el-color-primary #409eff 主题色，用于主要操作按钮、链接、选中状态
--el-color-primary-light-1 #53a8ff 主色浅1级，用于 hover 状态
--el-color-primary-light-2 #66b1ff 主色浅2级
--el-color-primary-light-3 #79bbff 主色浅3级
--el-color-primary-light-4 #8cc5ff 主色浅4级
--el-color-primary-light-5 #a0cfff 主色浅5级
--el-color-primary-light-6 #b3d8ff 主色浅6级
--el-color-primary-light-7 #c6e2ff 主色浅7级
--el-color-primary-light-8 #d9ecff 主色浅8级
--el-color-primary-light-9 #ecf5ff 主色浅9级，用于背景色
--el-color-primary-dark-2 #337ecc 主色深2级，用于 active 状态

功能色

变量名 Hex 值 用途说明
--el-color-success #67c23a 成功色，用于成功提示、完成状态
--el-color-warning #e6a23c 警告色，用于警告提示、注意状态
--el-color-danger #f56c6c 危险色，用于错误提示、删除操作
--el-color-error #f56c6c 错误色，同危险色
--el-color-info #909399 信息色，用于一般信息提示

中性色 - 文本

变量名 Hex 值 用途说明
--el-text-color-primary #303133 主要文本颜色，用于标题、重要文字
--el-text-color-regular #606266 常规文本颜色，用于正文
--el-text-color-secondary #909399 次要文本颜色，用于辅助说明
--el-text-color-placeholder #a8abb2 占位符颜色
--el-text-color-disabled #c0c4cc 禁用文本颜色

中性色 - 边框

变量名 Hex 值 用途说明
--el-border-color #dcdfe6 基础边框颜色
--el-border-color-light #e4e7ed 浅色边框
--el-border-color-lighter #ebeef5 更浅边框
--el-border-color-extra-light #f2f6fc 极浅边框
--el-border-color-dark #d4d7de 深色边框
--el-border-color-darker #cdd0d6 更深边框

中性色 - 填充

变量名 Hex 值 用途说明
--el-fill-color #f0f2f5 基础填充色
--el-fill-color-light #f5f7fa 浅色填充
--el-fill-color-lighter #fafafa 更浅填充
--el-fill-color-extra-light #fafcff 极浅填充
--el-fill-color-dark #ebedf0 深色填充
--el-fill-color-darker #e6e8eb 更深填充
--el-fill-color-blank #ffffff 空白填充（白色）

中性色 - 背景

变量名 Hex 值 用途说明
--el-bg-color #ffffff 基础背景色
--el-bg-color-page #f2f3f5 页面背景色
--el-bg-color-overlay #ffffff 浮层背景色

基础色

变量名 Hex 值 用途说明
--el-color-white #ffffff 白色
--el-color-black #000000 黑色

字体排版

字体族

变量名 值 用途说明
--el-font-family 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif 默认字体族

字号

变量名 值 用途说明
--el-font-size-extra-large 20px 超大字号，用于大标题
--el-font-size-large 18px 大字号，用于次级标题
--el-font-size-medium 16px 中等字号，用于小标题
--el-font-size-base 14px 基础字号，用于正文
--el-font-size-small 13px 小字号，用于辅助文字
--el-font-size-extra-small 12px 超小字号，用于标注、提示

字重

变量名 值 用途说明
--el-font-weight-primary 500 主要字重，用于强调文字

行高

变量名 值 用途说明
--el-font-line-height-primary 1.5 主要行高，用于正文

间距与布局

组件尺寸

变量名 值 用途说明
--el-component-size-large 40px 大号组件高度
--el-component-size 32px 默认组件高度
--el-component-size-small 24px 小号组件高度

间距系统

Element Plus 采用 4px 基准 的间距系统，所有间距均为 4 的倍数。

间距值 使用场景
4px 最小间距，用于紧凑布局
8px 小组件间距
12px 中等间距
16px 标准间距，常用
20px 较大间距
24px 大间距
32px 超大间距

圆角与阴影

圆角

变量名 值 用途说明
--el-border-radius-base 4px 基础圆角，用于按钮、输入框
--el-border-radius-small 2px 小圆角，用于标签、徽章
--el-border-radius-round 20px 圆形，用于圆形按钮
--el-border-radius-circle 100% 完全圆形，用于头像

阴影

变量名 值 用途说明
--el-box-shadow 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08) 基础阴影，用于卡片、浮层
--el-box-shadow-light 0px 0px 12px rgba(0, 0, 0, 0.12) 浅色阴影，用于下拉菜单
--el-box-shadow-lighter 0px 0px 6px rgba(0, 0, 0, 0.12) 更浅阴影，用于轻微浮起
--el-box-shadow-dark 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16) 深色阴影，用于模态框

Z-Index 层级

变量名 值 用途说明
--el-index-normal 1 正常层级
--el-index-top 1000 顶层，用于固定定位元素
--el-index-popper 2000 弹出层，用于下拉、弹窗

基础组件

Button 按钮

概述

按钮用于触发即时操作，是最常用的交互组件之一。

设计规格

类型
类型 背景色 文字色 边框色 用途说明
Primary --el-color-primary #ffffff 同背景 主要操作按钮
Success --el-color-success #ffffff 同背景 成功操作按钮
Warning --el-color-warning #ffffff 同背景 警告操作按钮
Danger --el-color-danger #ffffff 同背景 危险操作按钮
Info --el-color-info #ffffff 同背景 信息操作按钮
Default --el-fill-color-blank --el-text-color-regular --el-border-color 默认按钮
尺寸
尺寸 高度 字号 水平padding
Large 40px --el-font-size-large 20px
Default 32px --el-font-size-base 16px
Small 24px --el-font-size-small 12px
状态
状态 背景色变化 文字色变化 说明
Hover 变浅一级 不变 鼠标悬停
Active 变深一级 不变 点击激活
Disabled --el-fill-color-light --el-text-color-disabled 禁用状态
CSS 变量
--el-button-font-weight: var(--el-font-weight-primary);
--el-button-border-radius: var(--el-border-radius-base);
--el-button-hover-link-text-color: var(--el-color-primary-light-3);

Border 边框

概述

定义边框样式规范，包括圆角和边框线。

设计规格

圆角
类型 值 用途说明
小圆角 2px 标签、徽章等小组件
基础圆角 4px 按钮、输入框、卡片等
圆形 20px 圆形按钮
完全圆形 100% 头像、圆形图标背景
边框
属性 值 用途说明
边框宽度 1px 所有边框统一宽度
边框样式 solid 实线边框
默认颜色 --el-border-color 默认边框颜色
Hover颜色 --el-color-primary 输入框等组件hover时

Color 色彩

概述

Element Plus 的色彩系统，包含主题色、功能色和中性色。

设计规格

主题色梯度
色阶 Hex CSS变量 用途
基础 #409eff --el-color-primary 主要操作
浅1 #53a8ff --el-color-primary-light-1 hover
浅2 #66b1ff --el-color-primary-light-2 -
浅3 #79bbff --el-color-primary-light-3 -
浅4 #8cc5ff --el-color-primary-light-4 -
浅5 #a0cfff --el-color-primary-light-5 -
浅6 #b3d8ff --el-color-primary-light-6 -
浅7 #c6e2ff --el-color-primary-light-7 -
浅8 #d9ecff --el-color-primary-light-8 -
浅9 #ecf5ff --el-color-primary-light-9 背景
深2 #337ecc --el-color-primary-dark-2 active
功能色
类型 Hex CSS变量 用途
成功 #67c23a --el-color-success 成功状态
警告 #e6a23c --el-color-warning 警告状态
危险 #f56c6c --el-color-danger 危险/删除
错误 #f56c6c --el-color-error 错误状态
信息 #909399 --el-color-info 信息提示

Container 布局容器

概述

用于页面整体布局的容器组件，包含 Header、Aside、Main、Footer。

设计规格

布局结构
+------------------+
|     Header       |  高度: 60px (推荐)
+------------------+
|        |         |
|  Aside |  Main   |  Aside宽度: 200-300px
|        |         |  Main: flex: 1
+------------------+
|     Footer       |  高度: 40-60px
+------------------+
CSS 变量
--el-container-header-height: 60px;
--el-container-aside-width: 200px;
--el-container-footer-height: 60px;

Icon 图标

概述

Element Plus 提供了一套精美的图标系统。

设计规格

图标尺寸
类型 大小 用途说明
默认 1em 跟随文字大小
大图标 16px 独立图标
超大图标 28px 强调图标
CSS 变量
--el-icon-size: 1em;
--el-icon-large-size: 28px;

Layout 布局

概述

基于 24 栅格系统的布局组件。

设计规格

栅格系统
  • 总列数：24 列
  • 间距：通过 gutter 属性设置，推荐 16px 或 24px
断点
断点 宽度 用途
xs <768px 超小屏（手机）
sm ≥768px 小屏（平板）
md ≥992px 中屏（小桌面）
lg ≥1200px 大屏（桌面）
xl ≥1920px 超大屏

Link 链接

概述

文本链接组件，用于页面内导航或外部链接。

设计规格

类型
类型 颜色 用途说明
Default --el-text-color-regular 默认链接
Primary --el-color-primary 主要链接
Success --el-color-success 成功链接
Warning --el-color-warning 警告链接
Danger --el-color-danger 危险链接
Info --el-color-info 信息链接
状态
状态 效果
Hover 下划线 + 颜色变浅
Active 颜色变深
Disabled 禁用色 + 不可点击

Text 文本

概述

文本样式组件，提供丰富的文本样式配置。

设计规格

字号
类型 值 CSS变量 用途
超大 20px --el-font-size-extra-large 大标题
大 18px --el-font-size-large 次级标题
中等 16px --el-font-size-medium 小标题
基础 14px --el-font-size-base 正文
小 13px --el-font-size-small 辅助文字
超小 12px --el-font-size-extra-small 标注
字重
类型 值 用途
正常 400 常规文字
中等 500 强调文字
粗体 600 标题文字
颜色

使用 --el-text-color-* 系列变量。

Scrollbar 滚动条

概述

自定义滚动条样式组件。

设计规格

滚动条尺寸
属性 值
宽度 6px (垂直)
高度 6px (水平)
滚动条颜色
状态 颜色
默认 rgba(0, 0, 0, 0.2)
Hover rgba(0, 0, 0, 0.3)
拖拽 rgba(0, 0, 0, 0.4)

Space 间距

概述

统一间距组件，用于控制组件之间的间距。

设计规格

间距值
类型 值 用途
小 8px 紧凑布局
默认 12px 标准间距
大 16px 宽松布局
超大 24px 超大间距

Splitter 分隔面板

概述

可调整大小的分隔面板组件。

设计规格

分隔条
属性 值
宽度（垂直） 2px
高度（水平） 2px
背景色 --el-border-color
Hover色 --el-color-primary

Typography 排版

概述

排版组件，用于标题、段落等文本内容的样式规范。

设计规格

标题
级别 字号 字重 行高 用途
H1 --el-font-size-extra-large 600 1.4 页面主标题
H2 --el-font-size-large 600 1.4 章节标题
H3 --el-font-size-medium 600 1.4 小节标题
H4 --el-font-size-base 600 1.4 组标题
H5 --el-font-size-base 500 1.4 子标题
H6 --el-font-size-small 500 1.4 小小标题
段落
属性 值
字号 --el-font-size-base
字重 400
行高 1.6
颜色 --el-text-color-regular
文字样式
类型 颜色 用途
主要 --el-text-color-primary 重要文字
常规 --el-text-color-regular 正文
次要 --el-text-color-secondary 辅助说明
占位符 --el-text-color-placeholder 输入框提示
禁用 --el-text-color-disabled 禁用文字

配置组件

Config Provider 全局配置

概述

全局配置组件，用于配置整个应用的默认设置。

设计规格

可配置项
配置项 类型 默认值 说明
locale Object zh-cn 语言配置
size String default 组件尺寸
z-index Number 2000 弹出层z-index
namespace String el CSS前缀

表单组件

Autocomplete 自动补全输入框

概述

带输入建议的自动补全输入框。

设计规格

尺寸
尺寸 高度 字号
Large 40px --el-font-size-large
Default 32px --el-font-size-base
Small 24px --el-font-size-small
下拉列表
属性 值
最大高度 280px
项高度 34px
圆角 --el-border-radius-base
阴影 --el-box-shadow-light

Cascader 级联选择器

概述

多级级联选择器，用于选择有层级关系的数据。

设计规格

尺寸
尺寸 高度
Large 40px
Default 32px
Small 24px
下拉面板
属性 值
最小宽度 200px
项高度 34px
圆角 --el-border-radius-base
阴影 --el-box-shadow

Checkbox 多选框

概述

多选框组件，用于选择一个或多个选项。

设计规格

尺寸
属性 值
输入框大小 14px × 14px
字号 --el-font-size-base
圆角 --el-border-radius-small
状态
状态 边框色 背景色 图标色
默认 --el-border-color 透明 -
Hover --el-color-primary 透明 -
选中 --el-color-primary --el-color-primary #ffffff
禁用 --el-border-color --el-fill-color-light --el-text-color-placeholder

Color Picker 颜色选择器

概述

用于选择颜色的选择器组件。

设计规格

面板
属性 值
宽度 280px
圆角 --el-border-radius-base
阴影 --el-box-shadow

Date Picker 日期选择器

概述

用于选择日期的选择器组件。

设计规格

尺寸
尺寸 高度
Large 40px
Default 32px
Small 24px
日期面板
属性 值
单元格宽度 36px
单元格高度 32px
圆角 --el-border-radius-base
状态
状态 背景色 文字色
今天 透明 --el-color-primary
选中 --el-color-primary #ffffff
范围 --el-color-primary-light-9 --el-color-primary
Hover --el-color-primary-light-9 --el-color-primary

DateTime Picker 日期时间选择器

概述

同时选择日期和时间的选择器组件。

设计规格

面板
属性 值
宽度 300px
确认栏高度 40px

Form 表单组件

概述

表单容器组件，用于收集用户输入。

设计规格

布局
类型 标签位置 用途
垂直 上 默认布局
水平 左/右 并排布局
行内 左 行内表单
标签
属性 值
宽度（水平） 80px (推荐)
对齐 right (推荐)
表单项间距
属性 值
垂直间距 22px

Input 输入框

概述

基础文本输入框组件。

设计规格

尺寸
尺寸 高度 字号
Large 40px --el-font-size-large
Default 32px --el-font-size-base
Small 24px --el-font-size-small
状态
状态 边框色 背景色
默认 --el-border-color --el-fill-color-blank
Hover --el-border-color-hover --el-fill-color-blank
Focus --el-color-primary --el-fill-color-blank
禁用 --el-border-color --el-fill-color-light
内边距
尺寸 水平padding
Large 16px
Default 12px
Small 8px

Input Number 数字输入框

概述

仅允许输入数字的输入框组件。

设计规格

尺寸
尺寸 高度 按钮宽度
Large 40px 32px
Default 32px 24px
Small 24px 20px

Input Tag 标签输入框

概述

用于输入标签的输入框组件，支持动态添加标签。

设计规格

标签样式
属性 值
高度 24px (small)
圆角 --el-border-radius-small
间距 4px

Mention 提及

概述

提及组件，用于在输入时提及他人。

设计规格

下拉面板
属性 值
最大高度 280px
项高度 34px
圆角 --el-border-radius-base

Radio 单选框

概述

单选框组件，用于在一组选项中选择一个。

设计规格

尺寸
属性 值
圆形直径 14px
内圆直径 8px
字号 --el-font-size-base
状态
状态 边框色 内圆色
默认 --el-border-color 透明
Hover --el-color-primary 透明
选中 --el-color-primary --el-color-primary
禁用 --el-border-color --el-text-color-placeholder

Rate 评分

概述

评分组件，用于星级评分。

设计规格

图标
属性 值
大小 18px
间距 4px
未选中色 --el-fill-color
选中色 --el-color-warning

Select 选择器

概述

下拉选择器组件。

设计规格

尺寸
尺寸 高度
Large 40px
Default 32px
Small 24px
下拉面板
属性 值
最大高度 280px
项高度 34px
圆角 --el-border-radius-base
阴影 --el-box-shadow-light
选项状态
状态 背景色 文字色
默认 透明 --el-text-color-regular
Hover --el-fill-color-light --el-text-color-primary
选中 --el-color-primary-light-9 --el-color-primary
禁用 透明 --el-text-color-disabled

Slider 滑块

概述

滑块组件，用于在范围内选择数值。

设计规格

轨道
属性 值
高度 6px
背景色 --el-fill-color
激活色 --el-color-primary
圆角 3px
滑块
属性 值
大小 16px
背景色 #ffffff
边框色 --el-border-color
Hover大小 20px

Switch 开关

概述

开关组件，用于切换两种状态。

设计规格

尺寸
尺寸 宽度 高度
Default 40px 20px
Small 32px 16px
状态
状态 背景色 滑块色
关闭 --el-border-color #ffffff
开启 --el-color-primary #ffffff

Time Picker 时间选择器

概述

时间选择器组件。

设计规格

面板
属性 值
列宽 56px
项高度 32px
最大高度 200px

Time Select 时间选择

概述

选择特定时间点的选择器。

设计规格

下拉面板
属性 值
最大高度 200px
项高度 34px

Transfer 穿梭框

概述

双栏穿梭选择框组件。

设计规格

面板
属性 值
宽度 200px
高度 300px
圆角 --el-border-radius-base
边框 --el-border-color

TreeSelect 树形选择

概述

树形结构的选择器组件。

设计规格

下拉面板
属性 值
最大高度 280px
项高度 34px
缩进 16px

Upload 上传器

概述

文件上传组件。

设计规格

上传区域
属性 值
宽度 100px (推荐)
高度 100px (推荐)
边框 1px dashed --el-border-color
圆角 --el-border-radius-base
Hover边框 --el-color-primary

数据展示

Avatar 头像

概述

头像组件，用于展示用户头像或信息。

设计规格

尺寸
尺寸 值 用途
Large 40px 大头像
Default 32px 默认头像
Small 24px 小头像
形状
类型 圆角
Circle 50%
Square --el-border-radius-base
背景色
类型 颜色
默认 --el-fill-color
主题色 --el-color-primary

Badge 徽章

概述

徽章组件，用于展示数量或状态标记。

设计规格

徽章
属性 值
最小宽度 18px
高度 18px
圆角 9px
字号 12px
背景色 --el-color-danger
文字色 #ffffff
点
属性 值
大小 8px
圆角 50%
背景色 --el-color-danger

Calendar 日历

概述

日历组件，用于展示日期信息。

设计规格

头部
属性 值
高度 50px
字号 --el-font-size-base
字重 500
单元格
属性 值
最小高度 80px
边框 --el-border-color-lighter

Card 卡片

概述

卡片容器组件。

设计规格

卡片
属性 值
圆角 --el-border-radius-base
阴影 --el-box-shadow
背景色 --el-bg-color
头部
属性 值
高度 50px
边框 --el-border-color-lighter
字号 --el-font-size-base
字重 500
内容区
属性 值
内边距 16px

Carousel 走马灯

概述

走马灯组件，用于轮播展示。

设计规格

指示器
属性 值
类型 圆点/按钮
大小 8px (圆点)
间距 4px
默认色 --el-border-color
激活色 --el-color-primary
箭头
属性 值
大小 36px
背景 rgba(0,0,0,0.2)
Hover背景 rgba(0,0,0,0.4)

Collapse 折叠面板

概述

折叠面板组件，用于分组展示内容。

设计规格

面板
属性 值
边框 --el-border-color-lighter
圆角 --el-border-radius-base
头部
属性 值
高度 48px
背景色 --el-fill-color-blank
字号 --el-font-size-base
字重 500
内容区
属性 值
内边距 16px
字号 --el-font-size-base
颜色 --el-text-color-regular

Descriptions 描述列表

概述

描述列表组件，用于展示键值对信息。

设计规格

头部
属性 值
字号 --el-font-size-base
字重 500
颜色 --el-text-color-primary
底部间距 16px
表格
属性 值
标签宽度 100px (推荐)
标签颜色 --el-text-color-regular
内容颜色 --el-text-color-primary
边框 --el-border-color-lighter

Empty 空状态

概述

空状态组件，用于展示无数据状态。

设计规格

图标
属性 值
大小 80px
颜色 --el-fill-color
文字
属性 值
字号 --el-font-size-base
颜色 --el-text-color-secondary
间距 16px

Image 图片

概述

图片组件，支持预览等功能。

设计规格

预览遮罩
属性 值
背景色 rgba(0,0,0,0.8)
图标大小 24px
图标色 #ffffff

Pagination 分页

概述

分页组件，用于数据分页展示。

设计规格

分页按钮
属性 值
最小宽度 32px
高度 32px
圆角 --el-border-radius-small
字号 --el-font-size-base
状态
状态 背景色 文字色 边框色
默认 透明 --el-text-color-regular 透明
Hover --el-fill-color-light --el-color-primary 透明
当前页 --el-color-primary #ffffff --el-color-primary
禁用 透明 --el-text-color-disabled 透明
跳转
属性 值
输入框宽度 50px
输入框高度 32px

Progress 进度条

概述

进度条组件，用于展示进度。

设计规格

进度条
属性 值
高度 6px
圆角 3px
背景色 --el-fill-color
进度色 --el-color-primary
状态色
状态 颜色
成功 --el-color-success
警告 --el-color-warning
危险 --el-color-danger
文字
属性 值
字号 --el-font-size-small
颜色 --el-text-color-regular

Result 结果

概述

结果组件，用于展示操作结果。

设计规格

图标
属性 值
大小 64px
标题
属性 值
字号 --el-font-size-base
字重 500
颜色 --el-text-color-primary
间距 8px
描述
属性 值
字号 --el-font-size-small
颜色 --el-text-color-secondary

Skeleton 骨架屏

概述

骨架屏组件，用于加载时的占位。

设计规格

骨架项
属性 值
背景色 --el-fill-color
圆角 --el-border-radius-small
动画 闪烁效果
段落
类型 高度 宽度
标题 16px 40%
正文 12px 100%

Table 表格

概述

表格组件，用于展示结构化数据。

设计规格

表头
属性 值
高度 40px
背景色 --el-fill-color-light
字号 --el-font-size-base
字重 500
颜色 --el-text-color-primary
边框 --el-border-color-lighter
单元格
属性 值
高度 40px
字号 --el-font-size-base
颜色 --el-text-color-regular
边框 --el-border-color-lighter
状态
状态 背景色
Hover --el-fill-color-light
选中 --el-color-primary-light-9
条纹 --el-fill-color-lighter

Tag 标签

概述

标签组件，用于标记和分类。

设计规格

尺寸
尺寸 高度 字号 内边距
Large 32px --el-font-size-base 12px
Default 24px --el-font-size-small 8px
Small 20px --el-font-size-extra-small 6px
类型
类型 背景色 边框色 文字色
Primary --el-color-primary-light-9 --el-color-primary-light-7 --el-color-primary
Success --el-color-success-light-9 --el-color-success-light-7 --el-color-success
Warning --el-color-warning-light-9 --el-color-warning-light-7 --el-color-warning
Danger --el-color-danger-light-9 --el-color-danger-light-7 --el-color-danger
Info --el-color-info-light-9 --el-color-info-light-7 --el-color-info
圆角
属性 值
默认 --el-border-radius-small
圆形 高度/2

Timeline 时间线

概述

时间线组件，用于展示时间轴事件。

设计规格

节点
属性 值
大小 12px
默认色 --el-border-color
主色 --el-color-primary
成功色 --el-color-success
警告色 --el-color-warning
危险色 --el-color-danger
线条
属性 值
宽度 2px
颜色 --el-border-color
内容
属性 值
间距 16px
字号 --el-font-size-base

Tour 漫游式引导

概述

漫游式引导组件，用于新手引导。

设计规格

浮层
属性 值
宽度 350px
圆角 --el-border-radius-base
阴影 --el-box-shadow-dark
背景色 --el-bg-color
头部
属性 值
高度 50px
字号 --el-font-size-base
字重 500
内容区
属性 值
内边距 16px
字号 --el-font-size-base
颜色 --el-text-color-regular
底部
属性 值
高度 50px
内边距 0 16px

Tree 树形控件

概述

树形控件组件，用于展示树形结构数据。

设计规格

节点
属性 值
高度 34px
缩进 16px
Hover背景 --el-fill-color-light
展开图标
属性 值
大小 16px
颜色 --el-text-color-secondary

Statistic 统计组件

概述

统计组件，用于展示统计数据。

设计规格

数值
属性 值
字号 --el-font-size-extra-large
字重 600
颜色 --el-text-color-primary
标题
属性 值
字号 --el-font-size-base
颜色 --el-text-color-secondary
间距 4px

Segmented 分段控制器

概述

分段控制器组件，用于在多个选项间切换。

设计规格

容器
属性 值
高度 32px
背景色 --el-fill-color
圆角 --el-border-radius-base
选项
属性 值
高度 28px
字号 --el-font-size-base
圆角 --el-border-radius-small
状态
状态 背景色 文字色
默认 透明 --el-text-color-regular
激活 --el-bg-color --el-text-color-primary
Hover --el-fill-color-light --el-text-color-primary

导航组件

Affix 固钉

概述

固钉组件，用于固定元素位置。

设计规格

固定位置
属性 值
z-index --el-index-top
背景色 --el-bg-color

Anchor 锚点

概述

锚点组件，用于页面内导航。

设计规格

容器
属性 值
宽度 150px (推荐)
边框 2px
边框色 --el-color-primary
圆角 --el-border-radius-small
链接
属性 值
高度 34px
字号 --el-font-size-base
颜色 --el-text-color-regular
激活色 --el-color-primary

Backtop 回到顶部

概述

回到顶部组件。

设计规格

按钮
属性 值
大小 40px
圆角 50%
背景色 --el-bg-color
阴影 --el-box-shadow
图标色 --el-color-primary

Breadcrumb 面包屑

概述

面包屑导航组件。

设计规格

分隔符
属性 值
颜色 --el-text-color-placeholder
间距 8px
链接
属性 值
字号 --el-font-size-base
颜色 --el-text-color-regular
当前页颜色 --el-text-color-primary

Dropdown 下拉菜单

概述

下拉菜单组件。

设计规格

触发按钮
属性 值
高度 32px (default)
内边距 0 12px
下拉面板
属性 值
最小宽度 100px
最大高度 280px
项高度 34px
圆角 --el-border-radius-base
阴影 --el-box-shadow-light
背景色 --el-bg-color
选项状态
状态 背景色 文字色
默认 透明 --el-text-color-regular
Hover --el-fill-color-light --el-text-color-primary
禁用 透明 --el-text-color-disabled
分隔线
属性 值
高度 1px
颜色 --el-border-color-lighter
间距 4px

Menu 菜单

概述

导航菜单组件。

设计规格

菜单项
属性 值
高度 50px
字号 --el-font-size-base
图标大小 18px
图标右边距 8px
状态（水平模式）
状态 背景色 文字色
默认 透明 --el-text-color-regular
Hover 透明 --el-color-primary
激活 透明 --el-color-primary
状态（垂直模式）
状态 背景色 文字色
默认 透明 --el-text-color-regular
Hover --el-fill-color-light --el-text-color-primary
激活 --el-color-primary-light-9 --el-color-primary
子菜单
属性 值
缩进 24px
背景色 --el-fill-color-lighter

Page Header 页头

概述

页面头部组件，包含标题、面包屑、操作等。

设计规格

容器
属性 值
高度 60px
内边距 0 20px
背景色 --el-bg-color
边框 --el-border-color-lighter
标题
属性 值
字号 --el-font-size-base
字重 500
颜色 --el-text-color-primary
返回按钮
属性 值
大小 24px
颜色 --el-text-color-regular
Hover色 --el-color-primary

Steps 步骤条

概述

步骤条组件，用于展示流程进度。

设计规格

步骤节点
属性 值
大小 24px
字号 --el-font-size-base
线宽 2px
状态
状态 节点色 线色 文字色
未完成 --el-border-color --el-border-color --el-text-color-secondary
进行中 --el-color-primary --el-color-primary --el-color-primary
已完成 --el-color-primary --el-color-primary --el-text-color-primary
错误 --el-color-danger --el-color-danger --el-color-danger

Tabs 标签页

概述

标签页组件，用于切换不同内容面板。

设计规格

标签
属性 值
高度 40px
字号 --el-font-size-base
间距 20px
状态
状态 文字色 边框色
默认 --el-text-color-regular 透明
Hover --el-text-color-primary 透明
激活 --el-color-primary --el-color-primary
指示条
属性 值
高度 2px
颜色 --el-color-primary

反馈组件

Alert 提示

概述

提示组件，用于展示重要提示信息。

设计规格

容器
属性 值
内边距 8px 16px
圆角 --el-border-radius-base
字号 --el-font-size-base
类型
类型 背景色 边框色 图标色
Success --el-color-success-light-9 --el-color-success-light-7 --el-color-success
Warning --el-color-warning-light-9 --el-color-warning-light-7 --el-color-warning
Error --el-color-danger-light-9 --el-color-danger-light-7 --el-color-danger
Info --el-color-info-light-9 --el-color-info-light-7 --el-color-info
标题
属性 值
字号 --el-font-size-base
字重 500
间距 4px
描述
属性 值
字号 --el-font-size-small
颜色 --el-text-color-secondary

Dialog 对话框

概述

模态对话框组件。

设计规格

遮罩
属性 值
背景色 rgba(0, 0, 0, 0.5)
z-index 2000
弹窗
属性 值
圆角 --el-border-radius-base
阴影 --el-box-shadow-dark
背景色 --el-bg-color
最小宽度 30%
头部
属性 值
高度 50px
内边距 0 20px
字号 --el-font-size-base
字重 500
颜色 --el-text-color-primary
边框 --el-border-color-lighter
内容区
属性 值
内边距 20px
字号 --el-font-size-base
颜色 --el-text-color-regular
底部
属性 值
高度 50px
内边距 0 20px
边框 --el-border-color-lighter
对齐 right

Drawer 抽屉

概述

抽屉组件，从屏幕边缘滑出的面板。

设计规格

遮罩
属性 值
背景色 rgba(0, 0, 0, 0.5)
z-index 2000
抽屉
属性 值
背景色 --el-bg-color
阴影 --el-box-shadow-dark
宽度 30% (默认)
头部
属性 值
高度 50px
内边距 0 20px
字号 --el-font-size-base
字重 500
边框 --el-border-color-lighter
内容区
属性 值
内边距 20px

Loading 加载

概述

加载组件，用于展示加载状态。

设计规格

遮罩
属性 值
背景色 rgba(255, 255, 255, 0.9)
加载图标
属性 值
大小 32px
颜色 --el-color-primary
文字
属性 值
字号 --el-font-size-small
颜色 --el-text-color-secondary
间距 8px

Message 消息提示

概述

消息提示组件，用于展示操作反馈。

设计规格

容器
属性 值
最大宽度 calc(100vw - 32px)
内边距 10px 16px
圆角 --el-border-radius-base
阴影 --el-box-shadow-light
背景色 --el-bg-color
图标
属性 值
大小 16px
文字
属性 值
字号 --el-font-size-base
颜色 --el-text-color-primary
类型
类型 图标色
Success --el-color-success
Warning --el-color-warning
Error --el-color-danger
Info --el-color-info

Message Box 消息弹出框

概述

消息弹出框组件，用于确认操作。

设计规格

弹窗
属性 值
宽度 420px
圆角 --el-border-radius-base
阴影 --el-box-shadow-dark
背景色 --el-bg-color
头部
属性 值
内边距 15px 20px 10px
字号 --el-font-size-base
字重 500
内容区
属性 值
内边距 10px 20px
字号 --el-font-size-base
颜色 --el-text-color-regular
底部
属性 值
高度 50px
内边距 5px 20px

Notification 通知

概述

通知组件，用于展示系统通知。

设计规格

容器
属性 值
宽度 330px
内边距 14px 16px
圆角 --el-border-radius-base
阴影 --el-box-shadow
背景色 --el-bg-color
标题
属性 值
字号 --el-font-size-base
字重 500
颜色 --el-text-color-primary
内容
属性 值
字号 --el-font-size-small
颜色 --el-text-color-regular
间距 4px

Popconfirm 气泡确认框

概述

气泡确认框组件。

设计规格

浮层
属性 值
内边距 12px 16px
圆角 --el-border-radius-base
阴影 --el-box-shadow-light
背景色 --el-bg-color
文字
属性 值
字号 --el-font-size-base
颜色 --el-text-color-primary
按钮
属性 值
尺寸 small
间距 8px

Popover 弹出框

概述

弹出框组件。

设计规格

浮层
属性 值
最小宽度 150px
内边距 12px
圆角 --el-border-radius-base
阴影 --el-box-shadow-light
背景色 --el-bg-color
标题
属性 值
字号 --el-font-size-base
字重 500
颜色 --el-text-color-primary
边框 --el-border-color-lighter

Tooltip 文字提示

概述

文字提示组件。

设计规格

浮层
属性 值
内边距 8px 12px
圆角 4px
背景色 rgba(0, 0, 0, 0.8)
文字色 #ffffff
字号 --el-font-size-small

其他组件

Divider 分割线

概述

分割线组件，用于分隔内容。

设计规格

线条
属性 值
高度 1px
颜色 --el-border-color-lighter
文字
属性 值
字号 --el-font-size-small
颜色 --el-text-color-regular
内边距 0 16px

Watermark 水印

概述

水印组件，用于添加页面水印。

设计规格

文字
属性 值
字号 16px
颜色 rgba(0, 0, 0, 0.1)
间距 24px

CSS 变量使用指南

基本用法

Element Plus 使用 CSS 自定义属性（CSS Variables）来实现主题定制。所有变量都以 --el- 为前缀。

/* 获取变量值 */
color: var(--el-color-primary);
background-color: var(--el-bg-color);

/* 设置变量值 */
:root {
  --el-color-primary: #your-color;
}

自定义主题

方法一：通过 SCSS 变量覆盖

// styles/element/index.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #your-primary-color,
    ),
  ),
);

方法二：通过 CSS 变量覆盖

/* 全局覆盖 */
:root {
  --el-color-primary: #your-color;
}

/* 局部覆盖 */
.custom-container {
  --el-color-primary: #your-color;
}

方法三：通过 JavaScript 动态修改

// 获取变量
const primaryColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--el-color-primary');

// 设置变量
document.documentElement.style.setProperty('--el-color-primary', '#your-color');

最佳实践

  1. 优先使用 CSS 变量：在自定义样式时，优先使用 Element Plus 提供的 CSS 变量，而不是硬编码颜色值。

  2. 局部覆盖：如果只需要在特定区域修改主题，建议在类名下覆盖变量，而不是在全局 :root 下。

  3. 保持一致性：修改主题色时，确保所有相关的颜色梯度（light-1 到 light-9）都相应调整。

  4. 测试暗黑模式：如果支持暗黑模式，确保自定义变量在暗黑模式下也能正常工作。

更新日志

版本 日期 说明
1.0.0 2024-XX-XX 初始版本，基于 Element Plus 2.13.6

本文档基于 Element Plus 2.13.6 版本编写，如有更新请以官方文档为准。