分类
选择类的组件可以细分为：
- 勾选 （一个CheckBox）
- 开关 （Switch）
- 下拉选择 （Select）
- 单选组 （radio-group）
- 多选组 （checkbox-group）
- 可填可选 （autocomplete）
针对每种分类单独封装几个组件
勾选
就是一个单独的CheckBox，这个一般用在用户注册的时候，选择同意条款的地方。 一个方框，打个勾勾就可以用软件，否则不让你用。 特点就是返回true和false。 我们来简单封装一下：
<!--勾选框--> <template> <el-checkbox v-model="value" @change="mySubmit" :id="'c' + meta.controlId" :name="'c' + meta.controlId" :disabled="meta.disabled" :placeholder="meta.placeholder" > {{meta.title}} </el-checkbox> </template> <script> import controlManage from '../manage/controlManage.js' import { metaInput } from '../manage/config.js' export default { name: 'nf-el-from-checkbox', props: { modelValue: Boolean, meta: metaInput }, emits: ['change', 'blur', 'focus'], setup (props, context) { const { value, mySubmit } = controlManage(props, context) return { value, mySubmit } } } </script> 复制代码
共用函数都已经分离出去了，所以这里设置一下模板就好。
开关
可能是UI库觉得框框打对号不好看吧，于是做了这种开关的方式，emmm，确实挺好看的。 还是简单的封装一下：
<!--开关，单选--> <template> <el-switch v-model="value" active-text="on" inactive-text="" @change="mySubmit" :disabled="meta.disabled" > </el-switch> </template> <script> import controlManage from '../manage/controlManage.js' import { metaInput } from '../manage/config.js' export default { name: 'nf-el-from-switch', props: { modelValue: Boolean, meta: metaInput }, emits: ['input', 'change', 'blur', 'focus', 'clear'], setup (props, context) { return { ...controlManage(props, context) } } } </script> 复制代码
同上。
单选组
就是一组圆圈圈。这个只能单选，适合于选项比较少的情况，比如男、女。 有些情况下可以当做tab标签来用，而UI库也很体贴的提供了标签的形式。 继续：
<!--单选组--> <template> <el-radio-group v-model="value" @change="mySubmit" :id="'c' + meta.controlId" :name="'c' + meta.controlId" :disabled="meta.disabled" :placeholder="meta.placeholder" > <el-radio v-for="item in meta.optionList" :key="'radio' + meta.controlId + item.value" :label="item.value"> {{item.label}} </el-radio> </el-radio-group> </template> <script> import controlManage from '../manage/controlManage.js' import { metaInput } from '../manage/config.js' export default { name: 'nf-el-from-radios', props: { modelValue: String, meta: metaInput }, emits: ['change', 'blur', 'focus'], setup (props, context) { const { value, mySubmit } = controlManage(props, context) return { value, mySubmit } } } </script> 复制代码
这里要感谢UI库，不仅提供了好看的外观，还提供了取值的功能。所以直接取值就好。
多选组
就是一组方框框，比较传统的多选的方式。
<!--多选组--> <template> <el-checkbox-group v-model="value" @change="mySubmit" :id="'c' + meta.controlId" :name="'c' + meta.controlId" :disabled="meta.disabled" :placeholder="meta.placeholder" > <el-checkbox v-for="item in meta.optionList" :key="'check' + meta.controlId + item.value" :label="item.value"> {{item.label}} </el-checkbox> </el-checkbox-group> </template> <script> import controlManage from '../manage/controlManage.js' import { metaInput } from '../manage/config.js' export default { name: 'nf-el-from-checkboxs', props: { modelValue: Object, meta: metaInput }, emits: ['change', 'blur', 'focus'], setup (props, context) { const { value, mySubmit } = controlManage(props, context) return { value, mySubmit } } } </script> 复制代码
同理，不需要我们自己写代码，可以直接得到用户选择的选项值。
下拉列表框 Select
一个很基础很常用的选择组件，可以单选也可以多选，而且UI库还给扩充了查询的功能，在有些条件下还是非常实用的功能。
<!--下拉选择--> <template> <el-select v-model="value" @change="mySubmit" :id="'c' + meta.controlId" :name="'c' + meta.controlId" :disabled="meta.disabled" :placeholder="meta.placeholder" > <el-option v-for="item in meta.optionList" :key="'select' + meta.controlId + item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </template> <script> import controlManage from '../manage/controlManage.js' import { metaInput } from '../manage/config.js' export default { name: 'nf-el-from-select', props: { modelValue: String, meta: metaInput }, emits: ['change', 'blur', 'focus'], setup (props, context) { const { value, mySubmit } = controlManage(props, context) return { value, mySubmit } } } </script> 复制代码
依托强大的UI库，我们就省事了，绑定好属性就好。只是有个奇怪的情况，我加上“multiple”后，整个Select组件居然崩了，还得继续尝试以找到原因。
看看效果
封装之后，使用起来就更简单了，一个组件一行就可以，甚至我们可以使用v-for来循环，这样我们可以方便的做多行多列的表单。 这样表单再大也不怕了，也不用担心客户总是改需求。
