ElementUI组件系列解读之<CheckBox/Group>

206 阅读1分钟

El-checkbox

源码部分:

图片40.png

图片41.png

可以看出checkbox和radio的整体结构是很类似的,具体细节就不分析了,就简单看看差异点

图片42.png

图片43.png

如果checkbox是个group时  这里的value/model是用数组存储的

图片44.png

图片45.png

注意:

图片46.png

暴露给外面的接口 change

图片47.png

样式部分:

这里需要关注的是它这个√的css表示(利用正方向 去掉左上border 然后旋转得到)

图片48.png  

EL-checkbox-group

源码部分:

图片49.png

可以看到,其实group基本没什么逻辑,传值和赋值都在checkbox组件内部实现了

实现的方式就是通过compute和$emit

用例:

图片50.png