❌

普通视图

发现新文章，点击刷新页面。
今天 — 2025年11月30日首页

el-button源码解读3——:class="buttonKls"与颜色系统的关系

✇掘金 前端
作者 Joie
2025年11月30日 17:44

说明 :class="buttonKls" 与颜色系统的关系：

1. buttonKls 的作用

buttonKls 是一个计算属性，生成按钮需要的所有 CSS 类名：

const buttonKls = computed(() => [
  // el-button
  ns.b(),
  ns.m(_type.value),
  ns.m(_size.value),
  ns.is('disabled', _disabled.value),
  ns.is('loading', props.loading),
  ns.is('plain', _plain.value),
  ns.is('round', _round.value),
  ns.is('circle', props.circle),
  ns.is('text', _text.value),
  ns.is('link', props.link),
  ns.is('has-bg', props.bg),
])

假设 type="primary"，buttonKls 可能包含：

['el-button', 'el-button--primary', 'el-button--small', 'is-loading', ...]

2. 颜色系统的触发机制

颜色系统通过 CSS 类选择器触发。当 buttonKls 包含 'el-button--primary' 时，会匹配到对应的 CSS 规则。

3. 完整的关系链

用户使用: <el-button type="primary">
    ↓
props.type = 'primary'
    ↓
_type.value = 'primary'
    ↓
buttonKls = ['el-button', 'el-button--primary', ...]
    ↓
:class="buttonKls"  →  class="el-button el-button--primary"
    ↓
CSS 匹配: .el-button--primary { ... }
    ↓
button-variant('primary') 生成 CSS 变量
    ↓
应用颜色样式

4. 在 CSS 中的对应关系

看 button.scss 中的定义：

  @each $type in (primary, success, warning, danger, info) {
    @include m($type) {
      @include button-variant($type);
    }
  }

当 $type = 'primary' 时：

  • @include m('primary') → 生成 .el-button--primary 选择器
  • @include button-variant('primary') → 生成颜色相关的 CSS 变量

5. 实际渲染过程

步骤 1：Vue 组件生成类名

<el-button type="primary">按钮</el-button>

// buttonKls 计算后
['el-button', 'el-button--primary']

<!-- 最终渲染 -->
<button class="el-button el-button--primary">
  按钮
</button>

步骤 2：CSS 匹配类名

浏览器看到 class="el-button--primary"，匹配到：

// button.scss 中生成的
.el-button--primary {
  // button-variant('primary') 生成的 CSS 变量
  --el-button-bg-color: var(--el-color-primary);
  --el-button-border-color: var(--el-color-primary);
  --el-button-text-color: var(--el-color-white);
  --el-button-hover-bg-color: var(--el-color-primary-light-3);
  --el-button-active-bg-color: var(--el-color-primary-dark-2);
}

步骤 3：应用颜色

基础样式使用这些 CSS 变量：

.el-button {
  background-color: var(--el-button-bg-color);
  border-color: var(--el-button-border-color);
  color: var(--el-button-text-color);
}

因为 .el-button--primary 定义了这些变量，所以按钮会显示 primary 的颜色。

6. 关键理解

:class="buttonKls" 是连接 Vue 组件和 CSS 颜色系统的桥梁：

Vue 组件层面          CSS 样式层面
─────────────────────────────────
buttonKls            .el-button--primary
  ↓                       ↓
'el-button--primary'  →  匹配 CSS 选择器
  ↓                       ↓
应用类名              应用颜色样式

7. 不同类型的关系

用户传入 buttonKls 包含 CSS 匹配 颜色应用
type="primary" 'el-button--primary' .el-button--primary 蓝色 (#409eff)
type="success" 'el-button--success' .el-button--success 绿色 (#67c23a)
type="warning" 'el-button--warning' .el-button--warning 橙色 (#e6a23c)
type="danger" 'el-button--danger' .el-button--danger 红色 (#f56c6c)

8. 完整示例

<el-button type="primary" size="small" :loading="true">
  提交
</el-button>

生成的类名：

buttonKls = [
  'el-button',           // 基础类
  'el-button--primary',  // 类型类（触发颜色系统）
  'el-button--small',    // 尺寸类
  'is-loading'           // 状态类
]

最终 HTML：

<button class="el-button el-button--primary el-button--small is-loading">
  提交
</button>

CSS 匹配：

.el-button--primary {  // ← 这个类触发了颜色系统
  --el-button-bg-color: var(--el-color-primary);
  // ...
}

9. 总结

  • :class="buttonKls" 生成类名（如 el-button--primary）
  • CSS 通过类选择器匹配这些类名
  • 匹配到的规则通过 button-variant 生成颜色变量
  • 基础样式使用这些变量，最终显示对应颜色

核心关系：buttonKls 中的类型类名（如 el-button--primary）是触发颜色系统的开关，CSS 通过这个类名应用对应的颜色样式。

❌
❌