Element-ui 之 Checkbox-Group 组件的源码分析

最新推荐文章于 2025-10-07 15:04:54 发布

原创

最新推荐文章于 2025-10-07 15:04:54 发布 · 1k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #elementui

上一篇文章分析了element-ui中Checkbox组件的源代码。Element-ui 之 Checkbox 组件的源码分析

此篇文章将从Checkbox-Group组件提供的属性和事件的角度，逐步分析element-ui的Checkbox-Group组件源代码，从而介绍如何实现一个完整的Checkbox-Group组件。

一. Checkbox-Group 组件提供的属性和事件

1.1 属性

以下是 checkbox-Group 组件提供的属性：

参数	说明	类型	可选值	默认值
value / v-model	绑定值	array	–	–
size	多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效	string	medium / small / mini	–
disabled	是否禁用	boolean	–	false
min	可被勾选的 checkbox 的最小数量	number	–	–
max	可被勾选的 checkbox 的最大数量	number	–	–
text-color	按钮形式的 Checkbox 激活时的文本颜色	string	–	#ffffff
fill	按钮形式的 Checkbox 激活时的填充色和边框色	string	–	#409EFF

1.2 事件

事件名称	说明	回调参数
change	当绑定值变化时触发的事件	更新后的值

二. 按照步骤去实现 Checkbox-Group 组件的属性和事件

注册组件。
checkbox-group 的基本 template 部分。
绑定值 v-model 的处理。
禁用 disabled 属性的处理。
可被勾选的最小数量 min，最大数量 max 的处理。
尺寸 size 属性的处理。
接收 text-color 和 fill 属性，用于后续讲解的 checkbox-button 组件。

三. Checkbox 组件属性和事件的具体实现

3.1 注册组件

新建一个 checkbox-group.vue 文件，设置组件的 name 和 componentName 都为 ElCheckboxGroup。

在 main.js 文件里面引入这个组件，并且使用 Vue.component 来全局注册这个组件。

3.2 checkbox-group 的基本 template 部分

<template>
  <div class="el-checkbox-group" role="group" aria-label="checkbox-group">
    <slot></slot>
  </div>
</template>
<script>
export default {
     
     
  name: 'ElCheckboxGroup',

  componentName: 'ElCheckboxGroup',
}
</script>

一个 div 标签内部包裹父组件内部传过来的内容，div 设置属性 role="group"，aria-label="checkbox-group"。
aria-label 属性为无障碍 API，用来给元素增加标签描述，接收字符串为参数。

3.3 绑定值 v-model 的处理

实现步骤：

新建一个文件，文件内部引入 checkbox-group 组件，并且在 checkbox-group 组件内容写入三个 checkbox 组件，给 checkbox 组件增加 label 属性，checkbox-group 组件增加 v-model 绑定值。

<template>
  <el-checkbox-group v-model="checkList">
    <el-checkbox :label="1">备选项1</el-checkbox>
    <el-checkbox :label="2">备选项2</el-checkbox>
    <el-checkbox :label="3">备选项3</el-checkbox>
  </el-checkbox-group>
</template>
<script>
export default {
     
     
  data() {
     
     
    return {
     
     
      checkList: [1]
    }
  }
}
</script>

在 checkbox-group 组件中用 props 使用默认的 value 属性用来接收 v-model 的绑定值。

props: {
   
   
  value: {
   
   }
}

在 checkbox 组件中设置计算属性 isGroup 来判断该多选框是否被包含在多选框组里面。如果被包含在多选框组里面，则用变量 _checkboxGroup 保存多选框组的信息。

isGroup() {
   
   
  // parent 变量保存组件的父级元素信息
  let parent = this.$parent;
  while (parent) {
   
   
    if (parent.$options.componentName !== 'ElCheckboxGroup') {
   
   
      // 如果父级的 componentName 不是 ElCheckboxGroup 则继续向上查找
      parent = parent<