element-ui checkbox-button和checkbox-group组件源码学习

2018年11月08日Web前端

看完了checkbox组件的,接下来当然看下checkbox-button和checkbox-group组件的源码。

首先,checkbox-button是和checkbox-group配合使用的。

一、checkbox-button html

html上与checkbox组件比较相像,没有了checkbox前的勾选框,html层级减少了一层。另外就是checkbox的内容显示增加了style为checked的样式,其他方面区别并不大。

二、checkbox-button JS

大部分的方法与checkbox中类似,这儿只列下不同的属性和方法。

activeStyle()

仅有该函数大不相同,作用是给了当checkbox-button被选中时的样式。

三、checkbox-group html

仅仅给checkbox-button增加了个div,控制了样式状态。

四、checkbox-button js部分

name

名称

componentName

组件名称

mixins

混入组件之间通讯组件。

inject

注入elFormItem对象,防止单独组件使用时,报错。

props

  • value,当前model值
  • disabled,是否禁用
  • min,勾选的checkbox的最小数量
  • max,勾选的checkbox的最大数量
  • size,checkbox-group整体大小
  • fill,按钮形式的 Checkbox 激活时的填充色和边框色
  • textColor,按钮形式的 Checkbox 激活时的文本颜色

computed

  • _elFormItemSize(),formitem大小。
  • checkboxGroupSize(),group大小。

watch

  • value(value),监听value值,当value变化时,向父级ElFormItem组件触发el.form.change事件。

带注释的源码下载:checkbox-button.vuecheckbox-group.vue