分类
选择类的组件可以细分为：
- 勾选 （一个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组件居然崩了，还得继续尝试以找到原因。
看看效果
002选择.png
封装之后，使用起来就更简单了，一个组件一行就可以，甚至我们可以使用v-for来循环，这样我们可以方便的做多行多列的表单。
这样表单再大也不怕了，也不用担心客户总是改需求。
网友评论