Vue3组件（七）封装选择类的组件

分类

选择类的组件可以细分为：

• 勾选 （一个CheckBox）
• 开关 （Switch）
• 下拉选择 （Select）
• 单选组 （radio-group）
• 多选组 （checkbox-group）
• 可填可选 （autocomplete）

针对每种分类单独封装几个组件

勾选

就是一个单独的CheckBox，这个一般用在用户注册的时候，选择同意条款的地方。
一个方框，打个勾勾就可以用软件，否则不让你用。
特点就是返回true和false。
我们来简单封装一下：

共用函数都已经分离出去了，所以这里设置一下模板就好。

开关

可能是UI库觉得框框打对号不好看吧，于是做了这种开关的方式，emmm，确实挺好看的。
还是简单的封装一下：

同上。

单选组

就是一组圆圈圈。这个只能单选，适合于选项比较少的情况，比如男、女。
有些情况下可以当做tab标签来用，而UI库也很体贴的提供了标签的形式。
继续：

这里要感谢UI库，不仅提供了好看的外观，还提供了取值的功能。所以直接取值就好。

多选组

就是一组方框框，比较传统的多选的方式。

同理，不需要我们自己写代码，可以直接得到用户选择的选项值。

下拉列表框 Select

一个很基础很常用的选择组件，可以单选也可以多选，而且UI库还给扩充了查询的功能，在有些条件下还是非常实用的功能。

依托强大的UI库，我们就省事了，绑定好属性就好。只是有个奇怪的情况，我加上“multiple”后，整个Select组件居然崩了，还得继续尝试以找到原因。

看看效果

002选择.png

封装之后，使用起来就更简单了，一个组件一行就可以，甚至我们可以使用v-for来循环，这样我们可以方便的做多行多列的表单。
这样表单再大也不怕了，也不用担心客户总是改需求。

源码

https://github.com/naturefwvue/nf-vue-element