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

看完了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.vue和checkbox-group.vue。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!