封裝表單子控件
表單控件需要很多子控件蹭劈，所以要先封裝一下子控件，然后才方便封裝表單控件。
定義接口特纤，統(tǒng)一規(guī)范
表單子控件有一個(gè)相同的需求，都需要實(shí)現(xiàn)屬性和 v-model 數(shù)據(jù)交換侥加，因?yàn)?element 把 value 給封裝成了v-model捧存，所以無法直接綁定組件的屬性，必須建立一個(gè)內(nèi)部變量來綁定担败。
所以需要一個(gè)轉(zhuǎn)換的方式昔穴，這里采用自定義ref來實(shí)現(xiàn)，順便實(shí)現(xiàn)了一下防抖功能提前。
雖然在表單控件里面并不需要防抖功能吗货，但是查詢的時(shí)候需要，而表單子控件是可以通用到查詢控件里面的狈网。
定義一個(gè) v-model 和 my-change
// 自定義 ref
/**
* 自定義的ref宙搬，實(shí)現(xiàn)屬性和內(nèi)部變量的數(shù)據(jù)轉(zhuǎn)換
* @param { reactive } props 組件的屬性
* @param { object } context 組件的上下文
* @param { number } delay 延遲刷新的時(shí)間，單位：毫秒拓哺，默認(rèn)：0
* @param { string } name 要對應(yīng)的屬性名稱勇垛，默認(rèn)：modelValue
* @returns 自定義的ref
*/
export const debounceRef = (props, context, delay = 0, name = 'modelValue') => {
? let _value = props[name]
? // 計(jì)時(shí)器
? let timeout
? // 是否輸入狀態(tài)。輸入時(shí)取 value拓售；輸入完畢取 modelValue 屬性
? let isInput = false
? return customRef((track, trigger) => {
? ? return {
? ? ? get () {
? ? ? ? track()
? ? ? ? if (isInput) {
? ? ? ? ? // console.log(isInput)
? ? ? ? ? return _value
? ? ? ? } else {
? ? ? ? ? // console.log(isInput)
? ? ? ? ? return props[name]
? ? ? ? }
? ? ? },
? ? ? set (newValue) {
? ? ? ? isInput = true
? ? ? ? _value = newValue // 綁定值
? ? ? ? trigger() // 組件內(nèi)部刷新模板
? ? ? ? clearTimeout(timeout) // 清掉上一次的計(jì)時(shí)
? ? ? ? timeout = setTimeout(() => {
? ? ? ? ? // 修改 modelValue 屬性
? ? ? ? ? context.emit(`update:${name}`, newValue) // 提交給父組件
? ? ? ? ? // 用于區(qū)分是哪個(gè)組件觸發(fā)的事件窥摄。
? ? ? ? ? context.emit('my-change', newValue, props.controlId, props.colName)
? ? ? ? ? isInput = false
? ? ? ? }, delay)
? ? ? }
? ? }
? })
}
封裝各種表單子控件
按照原子性原則，子控件封裝的比較細(xì)础淤，直接看圖：
表單子控件
代碼有點(diǎn)多崭放，不一一介紹了哨苛，感興趣的可以看源碼。
封裝表單控件
基礎(chǔ)工作做好之后币砂，我們就可以封裝 el-form 了建峭。
定義屬性
依據(jù) el-form 的屬性我們定義幾個(gè)關(guān)鍵性屬性
介紹屬性
/**
* 表單控件需要的屬性
*/
export const formProps = {
? modelValue: Object, // 完整的model
? partModel: Object, // 根據(jù)選項(xiàng)過濾后的model
? miniModel: Object, // 精簡的model
? /*
? * 自定義子控件 key:value形式
? * * key: 編號。1：插槽决摧；100-200：保留編號
? * * value：string：標(biāo)簽亿蒸；函數(shù)：異步組件，類似路由的設(shè)置
? */
? customerControl: { // 自定義的表單子組件
? ? type: Object,
? ? defaule: () => {}
? },
? colOrder: { // 表單字段的排序的依據(jù)
? ? type: Array,
? ? default: () => []
? },
? formColCount: { // 表單的列數(shù)
? ? type: Number,
? ? default: 1
? },
? reload: {
? ? type: Boolean, // 是否重新加載配置掌桩，需要來回取反
? ? default: false
? },
? itemMeta: {
? ? type: Object, // 表單子控件的屬性
? ? default: () => {}
? },
? ruleMeta: { // 驗(yàn)證信息
? ? type: Object,
? ? default: () => {}
? },
? formColShow: { // 數(shù)據(jù)變化边锁，聯(lián)動(dòng)組件是否顯示
? ? type: Object,
? ? default: () => {}
? }
}
定義內(nèi)部model
一般一個(gè) model 就可以，只是這里做了一個(gè)組件聯(lián)動(dòng)的波岛，那么如果只需要獲取可見的組件的值呢茅坛，于是做了局部model。
model
實(shí)現(xiàn)多行多列和布局調(diào)整
采用 el-col 實(shí)現(xiàn)则拷，通過控制 span 來實(shí)現(xiàn)多列贡蓖，所以理論上最多支持24列，當(dāng)然這個(gè)要看屏幕寬度了煌茬。
/**
* 處理一個(gè)字段占用幾個(gè)td的需求
* @param { object } props 表單組件的屬性
* @returns
*/
const getColSpan = (props) => {
? // 確定一個(gè)組件占用幾個(gè)格子
? const formColSpan = reactive({})
? // 表單子控件的屬性
? const formItemProps = props.itemMeta
? // 根據(jù)配置里面的colCount斥铺，設(shè)置 formColSpan
? const setFormColSpan = () => {
? ? const formColCount = props.formColCount // 列數(shù)
? ? const moreColSpan = 24 / formColCount // 一個(gè)格子占多少份
? ? if (formColCount === 1) {
? ? // 一列的情況
? ? ? for (const key in formItemProps) {
? ? ? ? const m = formItemProps[key]
? ? ? ? if (typeof m.colCount === 'undefined') {
? ? ? ? ? formColSpan[m.controlId] = moreColSpan
? ? ? ? } else {
? ? ? ? ? if (m.colCount >= 1) {
? ? ? ? ? ? // 單列，多占的也只有24格
? ? ? ? ? ? formColSpan[m.controlId] = moreColSpan
? ? ? ? ? } else if (m.colCount < 0) {
? ? ? ? ? ? // 擠一擠的情況坛善， 24 除以 占的份數(shù)
? ? ? ? ? ? formColSpan[m.controlId] = moreColSpan / (0 - m.colCount)
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? } else {
? ? ? // 多列的情況
? ? ? for (const key in formItemProps) {
? ? ? ? const m = formItemProps[key]
? ? ? ? if (typeof m.colCount === 'undefined') {
? ? ? ? ? formColSpan[m.controlId] = moreColSpan
? ? ? ? } else {
? ? ? ? ? if (m.colCount < 0 || m.colCount === 1) {
? ? ? ? ? ? // 多列晾蜘，擠一擠的占一份
? ? ? ? ? ? formColSpan[m.controlId] = moreColSpan
? ? ? ? ? } else if (m.colCount > 1) {
? ? ? ? ? ? // 多列，占的格子數(shù) * 份數(shù)
? ? ? ? ? ? formColSpan[m.controlId] = moreColSpan * m.colCount
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? }
? }
? return {
? ? formColSpan,
? ? setFormColSpan
? }
}
首先計(jì)算一下一列要用多少個(gè)span浑吟，也就是用24除以列數(shù)笙纤。
然后判斷是不是單列，單列要處理多個(gè)組件占用一個(gè)位置的需求组力，多列要處理一個(gè)組件占用多個(gè)位置的需求省容。
實(shí)現(xiàn)擴(kuò)展
表單子控件可以多種多樣，無法完全封裝進(jìn)入表單控件燎字，那么就需要表單控件支持子控件的擴(kuò)展腥椒。
這里要感謝 vue 的動(dòng)態(tài)組件功能，讓擴(kuò)展子控件變得非常方便候衍。
我們使用 component 和動(dòng)態(tài)組件來實(shí)現(xiàn)表單子控件的加載笼蛛。
<component
? ? :is="formItemListKey[getCtrMeta(ctrId).controlType]"
? ? v-model="formModel[getCtrMeta(ctrId).colName]"
? ? v-bind="getCtrMeta(ctrId)"
? ? @my-change="myChange">
? </component>
export const formItemList = {
? // 文本類 defineComponent
? 'el-form-text': defineAsyncComponent(() => import('./t-text.vue')),
? 'el-form-area': defineAsyncComponent(() => import('./t-area.vue')),
? 'el-form-url': defineAsyncComponent(() => import('./t-url.vue')),
? 'el-form-password': defineAsyncComponent(() => import('./t-password.vue')),
? // 數(shù)字
? 'el-form-number': defineAsyncComponent(() => import('./n-number.vue')),
? 'el-form-range': defineAsyncComponent(() => import('./n-range.vue')),
? // 日期、時(shí)間
? 'el-form-date': defineAsyncComponent(() => import('./d-date.vue')),
? 'el-form-datetime': defineAsyncComponent(() => import('./d-datetime.vue')),
? 'el-form-year': defineAsyncComponent(() => import('./d-year.vue')),
? 'el-form-month': defineAsyncComponent(() => import('./d-month.vue')),
? 'el-form-week': defineAsyncComponent(() => import('./d-week.vue')),
? 'el-form-time-select': defineAsyncComponent(() => import('./d-time-select.vue')),
? 'el-form-time-picker': defineAsyncComponent(() => import('./d-time-picker.vue')),
? // 選擇蛉鹿、開關(guān)
? 'el-form-checkbox': defineAsyncComponent(() => import('./s-checkbox.vue')),
? 'el-form-switch': defineAsyncComponent(() => import('./s-switch.vue')),
? 'el-form-checkboxs': defineAsyncComponent(() => import('./s-checkboxs.vue')),
? 'el-form-radios': defineAsyncComponent(() => import('./s-radios.vue')),
? 'el-form-select': defineAsyncComponent(() => import('./s-select.vue')),
? 'el-form-selwrite': defineAsyncComponent(() => import('./s-selwrite.vue')),
? 'el-form-select-cascader': defineAsyncComponent(() => import('./s-select-cascader.vue'))
}
/**
* 動(dòng)態(tài)組件的字典滨砍，便于v-for循環(huán)里面設(shè)置控件
*/
export const formItemListKey = {
? // 文本類
? 100: formItemList['el-form-area'], // 多行文本
? 101: formItemList['el-form-text'], // 單行文本
? 102: formItemList['el-form-password'], // 密碼
? 103: formItemList['el-form-text'], // 電話
? 104: formItemList['el-form-text'], // 郵件
? 105: formItemList['el-form-url'], // url
? 106: formItemList['el-form-text'], // 搜索
? // 數(shù)字
? 120: formItemList['el-form-number'], // 數(shù)字
? 121: formItemList['el-form-range'], // 滑塊
? // 日期、時(shí)間
? 110: formItemList['el-form-date'], // 日期
? 111: formItemList['el-form-datetime'], // 日期 + 時(shí)間
? 112: formItemList['el-form-month'], // 年月
? 113: formItemList['el-form-week'], // 年周
? 114: formItemList['el-form-year'], // 年
? 115: formItemList['el-form-time-picker'], // 任意時(shí)間
? 116: formItemList['el-form-time-select'], // 選擇固定時(shí)間
? // 選擇、開關(guān)
? 150: formItemList['el-form-checkbox'], // 勾選
? 151: formItemList['el-form-switch'], // 開關(guān)
? 152: formItemList['el-form-checkboxs'], // 多選組
? 153: formItemList['el-form-radios'], // 單選組
? 160: formItemList['el-form-select'], // 下拉
? 161: formItemList['el-form-selwrite'], // 下拉多選
? 162: formItemList['el-form-select-cascader'] // 下拉聯(lián)動(dòng)
}
需要擴(kuò)展子控件的時(shí)候惋戏，我們只需要向字典（dict）里面添加需要的組件即可领追，然后設(shè)置一個(gè)新的編號。
? // 添加臨時(shí)動(dòng)態(tài)組件
? formProps.customerControl = {
? ? 300: 'el-transfer'
? }
? // 設(shè)置表單字段
? childMeta.select.controlType = 300
為啥用編號响逢？雖然編號不易讀绒窑，但是編號穩(wěn)定，而且靈活舔亭。如果我們要基于ant design Vue 封裝控件的話些膨，我可以直接用編號，但是如果用名稱的話钦铺，那么要不要區(qū)分 el- 和 a- 呢订雾？
實(shí)現(xiàn)數(shù)據(jù)聯(lián)動(dòng)
聯(lián)動(dòng)分為數(shù)據(jù)聯(lián)動(dòng)，和組件聯(lián)動(dòng)职抡，數(shù)據(jù)聯(lián)動(dòng)可以依賴UI庫的組件來實(shí)現(xiàn)葬燎，或者依賴Vue的數(shù)據(jù)的響應(yīng)性來實(shí)現(xiàn)误甚。
比如常見的省市區(qū)縣聯(lián)動(dòng)缚甩，我們可以用 el-cascader。
如果需要使用多個(gè)組件的話窑邦，我們可以監(jiān)聽組件的值的變化擅威，然后獲取數(shù)據(jù)綁定下一個(gè)組件的options。
// 數(shù)據(jù)聯(lián)動(dòng)
? watch (() => model.provinces, (v1, v2) => {
? ? console.log('監(jiān)聽值的變化', v1)
? ? const arr = [
? ? ? {"value": 1 + v1, "label": "多選 選項(xiàng)一" + v1},
? ? ? {"value": 2 + v1, "label": "多選 選項(xiàng)二" + v1}
? ? ]
? ? childMeta.city.optionList.length = 0
? ? childMeta.city.optionList.push(...arr)
? })
Vue 就是數(shù)據(jù)驅(qū)動(dòng)的冈钦，所以聯(lián)動(dòng)的話也是直接監(jiān)聽value的改變即可郊丛，不用像以前那樣要設(shè)置change事件了。
實(shí)現(xiàn)組件聯(lián)動(dòng)
組件聯(lián)動(dòng)瞧筛，就是一個(gè)組件的值發(fā)生變化厉熟，影響其他組件的顯示狀態(tài)。
企業(yè)用戶
個(gè)人用戶
比如在注冊的時(shí)候较幌，需要選擇企業(yè)用戶還是個(gè)人用戶揍瑟。
如果是企業(yè)用戶，需要添加企業(yè)名稱（以及相關(guān)信息）乍炉；
如果是個(gè)人注冊那么只需要填寫個(gè)人姓名即可绢片。
這樣表單里面顯示的組件就要隨之變化。
對于這類的需求岛琼，我們可以配置一下 formColShow 屬性底循。
? ? "formColShow": {
? ? ? "90": {? // 組件ID
? ? ? ? "1": [90, 101, 100, 102, 105],? // 組件值對應(yīng)的需要顯示的組件ID，下同
? ? ? ? "2": [90, 120, 121],
? ? ? ? "3": [90, 110, 114, 112, 113, 115, 116],
? ? ? ? "4": [90, 150, 151, 152, 153, 160, 162]
? ? ? }
? ? },
配置好之后就可以實(shí)現(xiàn)了槐瑞，表單控件內(nèi)部代碼會(huì)做一個(gè) watch 監(jiān)聽：
? // 數(shù)據(jù)變化熙涤，聯(lián)動(dòng)組件的顯示
? if (typeof props.formColShow !== 'undefined') {
? ? for (const key in props.formColShow) {
? ? ? const ctl = props.formColShow[key]
? ? ? const colName = props.itemMeta[key].colName
? ? ? // 監(jiān)聽組件的值，有變化就重新設(shè)置局部model
? ? ? watch(() => formModel[colName], (v1, v2) => {
? ? ? ? if (typeof ctl[v1] === 'undefined') {
? ? ? ? ? // 沒有設(shè)定，顯示默認(rèn)組件
? ? ? ? ? setFormColSort()
? ? ? ? } else {
? ? ? ? ? // 按照設(shè)定顯示組件
? ? ? ? ? setFormColSort(ctl[v1])
? ? ? ? ? // 設(shè)置部分的 model
? ? ? ? ? createPartModel(ctl[v1])
? ? ? ? }
? ? ? })
? ? }
json格式
整個(gè)表單是依據(jù) json 動(dòng)態(tài)渲染出來的祠挫，那么json格式是啥樣的呢猬错？分為兩個(gè)部分，一個(gè)是表單控件自己需要的屬性茸歧，另一個(gè)是表單子控件需要的屬性倦炒，還有驗(yàn)證規(guī)則等。
{
? "formTest": {
? ? "baseProps": { // 表單控件自己的屬性
? ? ? "formColCount": 1, // 列數(shù)
? ? ? "colOrder": [ // 需要顯示的組件的ID
? ? ? ? 90,? 101, 102,
? ? ? ? 110, 111, 114, 112, 113, 115, 116,
? ? ? ? 120, 121, 100,
? ? ? ? 150, 151, 152, 153,
? ? ? ? 160, 162
? ? ? ]
? ? },
? ? "formColShow": { // 組件聯(lián)動(dòng)的信息
? ? ? "90": { // 觸發(fā)的組件
? ? ? ? "1": [90, 101, 100, 102, 105], // 組件值對應(yīng)的需要顯示的組件的ID
? ? ? ? "2": [90, 120, 121],
? ? ? ? "3": [90, 110, 114, 112, 113, 115, 116],
? ? ? ? "4": [90, 150, 151, 153, 152, 160, 162]
? ? ? }
? ? },
? ? "ruleMeta": { // 驗(yàn)證規(guī)則
? ? ? "101": [ // 表單子控件的ID软瞎，下面是驗(yàn)證規(guī)則
? ? ? ? { "trigger": "blur", "message": "請輸入活動(dòng)名稱", "required": true },
? ? ? ? { "trigger": "blur", "message": "長度在 3 到 5 個(gè)字符", "min": 3, "max": 5 }
? ? ? ]
? ? },
? ? "itemMeta": { // 表單子控件的屬性
? ? ? "90": {?
? ? ? ? "controlId": 90,
? ? ? ? "colName": "kind",
? ? ? ? "label": "分類",
? ? ? ? "controlType": 153,
? ? ? ? "isClear": false,
? ? ? ? "defaultValue": "",
? ? ? ? "placeholder": "分類",
? ? ? ? "title": "編號",
? ? ? ? "optionList": [
? ? ? ? ? {"value": 1, "label": "文本類"},
? ? ? ? ? {"value": 2, "label": "數(shù)字類"},
? ? ? ? ? {"value": 3, "label": "日期類"},
? ? ? ? ? {"value": 4, "label": "選擇類"}
? ? ? ? ],
? ? ? ? "colCount": 1
? ? ? },
? ? ? "100": {?
? ? ? ? "controlId": 100,
? ? ? ? "colName": "area",
? ? ? ? "label": "多行文本",
? ? ? ? "controlType": 100,
? ? ? ? "isClear": false,
? ? ? ? "defaultValue": 1000,
? ? ? ? "placeholder": "多行文本",
? ? ? ? "title": "多行文本",
? ? ? ? "colCount": 1
? ? ? },
? ? ? ...
? ? }
? }
}
遍歷子控件
因?yàn)樽涌丶挤庋b好了逢唤，所以只需要簡單遍歷即可：
? <el-form
? ? :model="formModel"
? ? :rules="rules"
? ? ref="formControl"
? ? :inline="false"
? ? class="demo-form-inline"
? ? label-suffix="："
? ? label-width="130px"
? ? size="mini"
? >
? ? <el-row>
? ? ? <!--不循環(huán)row，直接循環(huán)col涤浇，放不下會(huì)自動(dòng)往下?lián)Q行鳖藕。-->
? ? ? <el-col
? ? ? ? v-for="(ctrId, index) in formColSort"
? ? ? ? :key="'form_'+index"
? ? ? ? :span="formColSpan[ctrId]"
? ? ? ><!--:prop="getCtrMeta(ctrId).colName"-->
? ? ? ? <el-form-item
? ? ? ? ? :label="getCtrMeta(ctrId).label"
? ? ? ? ? :prop="getCtrMeta(ctrId).colName"
? ? ? ? >
? ? ? ? ? <!--判斷要不要加載插槽-->
? ? ? ? ? <template v-if="getCtrMeta(ctrId).controlType === 1">
? ? ? ? ? ? <!--<slot :name="ctrId">父組件沒有設(shè)置插槽</slot>-->
? ? ? ? ? ? <slot :name="getCtrMeta(ctrId).colName">父組件沒有設(shè)置插槽</slot>
? ? ? ? ? </template>
? ? ? ? ? <!--表單item組件，采用動(dòng)態(tài)組件的方式-->
? ? ? ? ? <template v-else>
? ? ? ? ? ? <component
? ? ? ? ? ? ? :is="dictControl[getCtrMeta(ctrId).controlType]"
? ? ? ? ? ? ? v-model="formModel[getCtrMeta(ctrId).colName]"
? ? ? ? ? ? ? v-bind="getCtrMeta(ctrId)"
? ? ? ? ? ? ? @my-change="myChange">
? ? ? ? ? ? </component>
? ? ? ? ? </template>
? ? ? ? </el-form-item>
? ? ? </el-col>
? ? </el-row>
? </el-form>
USB Microphone https://www.soft-voice.com/
Wooden Speakers? https://www.zeshuiplatform.com/
亞馬遜測評 www.yisuping.cn
深圳網(wǎng)站建設(shè)www.sz886.com
