拜读及分析Element源码-checkbox多选框组件篇

最新推荐文章于 2024-08-20 09:45:52 发布

weixin_34234823

最新推荐文章于 2024-08-20 09:45:52 发布

阅读量1.5k

点赞数 2

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5b978504e51d450e942f02f2

版权

本文深入分析了Element UI的Checkbox组件，包括Checkbox Group、Checkbox和Checkbox Button。内容涵盖组件结构、script部分的逻辑，如接收form组件注入、监听value变化、props属性、无障碍属性的应用以及变更事件的处理。此外，还讨论了各组件在不同场景下的应用，如多选和按钮样式的多选。

摘要由CSDN通过智能技术生成

element源码分析-checkbox多选框，感觉逻辑跟单选框很像，来看看吧。

checkbox多选框和单选框一样也分为三部分

checkbox-group：适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。
checkbox：多选。
checkbox-button：按钮样式的多选。

checkbox-group

相当于把checkbox和checkboxButton形成一个组

结构

  <div class="el-checkbox-group" role="group" aria-label="checkbox-group">
    <!-- 插槽：用来接收checkbox或checkbox-button -->
    <slot></slot>
  </div>
复制代码

script部分

1.接收form组件注入

默认为空，若在form组件中嵌套使用并form组件注入了elFormItem则有值

    inject: {
      elFormItem: {
        default: ''
      }
    }
复制代码

2.注入的内容会在computed中使用

    computed: {
      // 控制大小
      _elFormItemSize() {
        return (this.elFormItem || {}).elFormItemSize;
      },
      checkboxGroupSize() {
        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
      }
    }
复制代码

checkboxGroupSize会在checkbox和checkboxButton中用到

3.监听value

    watch: {
      // 监听value 向上寻找form组件发布el.form.change事件暴露value（数组）
      value(value) {
        this.dispatch('ElFormItem', 'el.form.change', [value]);
      }
    }
复制代码

4.props接收的属性

    props: {
      // 与v-model绑定
      value: {},
      // 是否禁用
      disabled: Boolean,
      // 最少勾选长度
      min: Number,
      // 最大勾选长度
      max: Number,
      // 大小
      size: String,
      // 边框及背景填充色
      fill: String,
      // 文字颜色
      textColor: String
    }
复制代码