官网表单实例
一般UI库都会提供一个form控件，非常方便好用，自己其中的item还是需要一行一行的写，比较麻烦。那么能不能循环出来呢？
官网实例，element-plus为例：
https://element-plus.gitee.io/#/zh-CN/component/form
-
立即创建
取消
好长，有点眼晕。这个表单只有七个成员，如果再多点代码会更长。
话说，大家都是怎么做的？不会都是这么写的吧。
这里抛砖引玉，说一下我的方法。
前提条件
想要for循环，直接用这样的组件应该是不可能的，组件名称不一样，组件的参数也都不一样（v-model除外），下拉列表这一类的还需要各种属性设置。这个怎么循环？
所以要先做两件事情：封装组件统一接口、封装注册方法。
封装组件
这个就是一个辛苦活，需要核对官网文档，一个一个属性校对，把属性合并成一个大的对象，统一传递进去。
以el-input 为例：
这里把共用的函数都拿出来放在了单独的js文件里面，这样便于扩展其他组件。
- inputManage.js
不大会起名，不是太准确，以后可能会调整。
/*
input 文本类的管理类，就是共用代码了。
*/
import { ref, watch } from 'vue'
const inputManage = (props, context) => {
// 设置默认值
const value = ref(props.meta.defaultValue)
// 监听属性，给 value 赋值
watch(() => props.modelValue, (v1, v2) => {
value.value = v1
})
// 向父组件提交事件
const myInput = (e) => {
context.emit('update:modelValue', e)
context.emit('input', e)
}
return {
value,
myInput
}
}
export default inputManage
统一处理value和提交用的emit。
因为 element-plus 把原生的 value 变成了v-model，所以不能直接使用组件的属性，需要转换一下。
- config.js
// 表单域控件类型
const formControlType = {
100: 'textarea', // 多行文本框 input-text
101: 'text', // 单行文本框 input-text
102: 'password', // 密码 input-password
103: 'tel', // 电话 input-text
104: 'email', // 电子邮件 input-text
105: 'url', // url input-url
106: 'search', // 搜索 input-text
107: 'color', // 颜色 input-color
108: 'text', // 弹窗选择记录
110: 'date', // 日期 input-date
111: 'datetime-local', // 日期时间
112: 'time', // 时间
113: 'week', // 年月
114: 'month', // 年周
120: 'number', // 数字
121: 'range', // 滑块
130: 'file', // 上传文件
131: 'file', // 上传图片
140: 'fulltext', // 富文本编辑器
150: 'checkbox', // 勾选
152: 'checkboxs', // 多选组
153: 'radios', // 单选组
170: 'select', // 下拉列表框 单选
171: 'selects', // 列表框 多选
172: 'selectMore' // 联动下拉列表框
}
// 表单域，文本类控件属性
const metaText = {
type: Object,
default: () => {
return {
// 通用
controlId: Number, // 编号，区别同一个表单里的其他控件
colName: String, // 字段名称
label: String, // 中文名称
controlType: Number, // 用类型编号表示type
isClear: {
// isClear 连续添加时是否恢复默认值
type: Boolean,
default: false
},
defaultValue: String, // 默认值
autofocus: { // 是否自动获得焦点
type: Boolean,
default: false
},
disabled: {
// 是否禁用
type: Boolean,
default: false
},
required: { // 必填
type: Boolean,
default: true
},
readonly: { // 只读
type: Boolean,
default: false
},
pattern: String, // 用正则做验证。
class: {
type: String,
default: ''
},
placeholder: String,
title: String, // 提示信息
size: Number, // 字符宽度
maxlength: Number, // 最大字符数
minlength: Number, // 最小字符数
autocomplete: { // off
type: String,
default: 'on'
},
optionKey: String, // 备选文字标识
optionItem: Object, // 备选的选项
// 多行文本
rows: Number, // 行数
autosize: Object, // 自适应内容高度
// 数字
max: Number,
min: Number,
step: Number,
ele: {
type: Object,
default: () => {
return {
show_word_limit: { // 是否显示输入字数统计 text和area有效
type: Boolean,
default: true
},
clearable: { // 是否显示清空标记
type: Boolean,
default: true
},
show_password: { // 是否显示切换密码图标
type: Boolean,
default: true
},
validate_event: { // 输入时是否触发表单的校验
type: Boolean,
default: true
},
resize: String // none, both, horizontal, vertical
}
}
}
}
}
}
export default {
formControlType,
metaText // 文本类的属性
}
定义组件类型，以及组件需要的属性。目前是针对text做的属性，后期可能会拆分开。
封装注册方法
组件分为全局注册和局部注册。
- 一般的局部注册是这样的：
import eltext from '@/components/nf-el-form/t-text.vue'
import elarea from '@/components/nf-el-form/t-area.vue'
import elurl from '@/components/nf-el-form/t-url.vue'
import elnumber from '@/components/nf-el-form/n-number.vue'
import elrange from '@/components/nf-el-form/n-range.vue'
import eldate from '@/components/nf-el-form/d-date.vue'
import eltime from '@/components/nf-el-form/d-time.vue'
import elradios from '@/components/nf-el-form/s-radios.vue'
import elcheckbox from '@/components/nf-el-form/s-checkbox.vue'
import elselect from '@/components/nf-el-form/s-select.vue'
import elswitch from '@/components/nf-el-form/s-switch.vue'
export default {
name: 'eleBase',
components: {
eltext,
elarea,
elurl,
elnumber,
elrange,
eldate,
eltime,
elradios,
elcheckbox,
elselect,
elswitch
},
显然太麻烦了。以后增加组件怎么办？到处修改吗？所以还是需要封装一下。
- 使用动态组件和异步组件进行注册
import elFormConfig from '@/components/nf-el-form/map-el-form.js'
export default {
name: 'plat-help-form-item-json',
components: {
...elFormConfig.formItemList
},
setup () {
const ctlList = elFormConfig.formItemListKey
return {
ctlList
}
}
引入js文件，一行搞定。
实现v-for遍历
然后我们就可以愉快的for了。
这样接口统一了，只需要准备好一份json文件，就可以v-for了。
这样表单里的控件再多也不用怕了，统统for出来。
效果
这个没啥好看的，因为和正常的el-form也没啥区别。
001表单效果.png
源码：（不断完善中）
https://github.com/naturefwvue/nf-vue-element