分類
選擇類的組件可以細分為：
- 勾選 （一個CheckBox）
- 開關(guān) （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>
共用函數(shù)都已經(jīng)分離出去了，所以這里設(shè)置一下模板就好。
開關(guān)
可能是UI庫覺得框框打?qū)μ柌缓每窗桑谑亲隽诉@種開關(guān)的方式，emmm，確實挺好看的。
還是簡單的封裝一下：
<!--開關(guān)，單選-->
<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庫也很體貼的提供了標簽的形式。
繼續(xù)：
<!--單選組-->
<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庫，不僅提供了好看的外觀，還提供了取值的功能。所以直接取值就好。
多選組
就是一組方框框，比較傳統(tǒng)的多選的方式。
<!--多選組-->
<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
一個很基礎(chǔ)很常用的選擇組件，可以單選也可以多選，而且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組件居然崩了，還得繼續(xù)嘗試以找到原因。
看看效果
002選擇.png
封裝之后，使用起來就更簡單了，一個組件一行就可以，甚至我們可以使用v-for來循環(huán)，這樣我們可以方便的做多行多列的表單。
這樣表單再大也不怕了，也不用擔心客戶總是改需求。
