胡一菲说过，做巧克力很简单嘛，把商场里卖的巧克力买回来，融化后加点葡萄干、干果，然后再造型、凝固——巧克力就做好了。
是不是超简单？
是的，在开源世界里面就是这么简单，我们完全可以在开源的UI库的基础上实现自己的想法。
那么为啥要进行二次封装呢？
- 便于切换UI库。
- 可以应对版本升级。
- 可以循环绑定控件。
- 折腾后自己用着舒服。
定义“接口”
一般UI库都会提供一些列的控件，比如form分类下面的控件，就可以有十多个，那么要封装的话，首先就要确定接口，否则只能封装个寂寞。
简洁期间，定义两个属性，一个事件。
modelValue
绑定控件值的，类型可以是string、number、数组等。meta
统一存放控件需要的各种属性，也可以包括回调函数。input
大多数情况都可以用input事件，各个的需要change等事件，不过事件比较宽松，可以灵活设定。
这里的接口并不是面向对象的接口，也没有用TypeScript那样的接口，而是一种约定和协议。原则上做限定，但是实际上还是可以放飞自我。
定义共用方法
vue2.x的时候需要使用mixin的方式，到了vue3.x 可以使用更灵活的方式来实现共用函数的目的。
inputManage
import { ref, watch } from 'vue'
const inputManage = (props, context) => {
// 绑定控件的值
const value = ref('')
// 监听属性，给 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
- 管理类的参数
因为要用到组件的属性和emit，所以需要设置两个参数来接收组件传递过来的属性和emit。
首先用 import 导入需要的方法，然后定义一个用于绑定控件的值 value——ref类型的——用着方便。
然后设置一个 watch 监控属性变化，然后给value赋值。
最后设计一个提交的函数。
基本设定就是这样，以后可以根据需求在完善，比如增加 blur 事件的提交，表单验证的时候可能会用到。
为啥不把组件的属性直接绑定到控件的value？一开始我就是直接绑定的，结果出错了。研究之后发现，element-plus把原生的value给覆盖了，变成了和 v-model 一样的属性了，这样就不能直接绑定组件的属性了。所以很无奈的做了一个内部的转换。
config
const metaInput = {
type: Object,
default: () => {
return {
// 通用
controlId: Number, // 编号，区别同一个表单里的其他控件
colName: 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: 'ant-input ant-input-sm'
},
placeholder: String,
title: String, // 提示信息
size: Number, // 字符宽度
maxlength: Number, // 最大字符数
autocomplete: { // off
type: String,
default: 'on'
},
optionKey: String, // 备选文字标识
optionItem: Object // 备选的选项
}
}
}
export default {
metaInput
}
这个是控件需要的属性的说明和验证。这么长的代码，当然要放在独立的地方了。
逐一封装控件
然后就是辛苦活了，一个一个封装呗，这里举一个例子就好，不一一贴代码了。
text 单行文本
<!--单行文本-->
<template>
<el-input
v-model="value"
@input="myInput"
:rows="12"
:autosize="{ minRows: 3, maxRows: 6 }"
:show-word-limit="true"
:maxlength="meta.maxlength"
:placeholder="meta.placeholder"
>
</el-input>
</template>
<script>
import inputManage from '../manage/inputManage.js'
import { metaInput } from '../manage/config.js'
export default {
name: 'nf-textarea',
props: {
modelValue: String,
meta: metaInput
},
emits: ['input', 'change', 'blur', 'focus', 'clear'],
setup (props, context) {
const { value, myInput } = inputManage(props, context)
return {
value,
myInput
}
}
}
</script>
template
按照控件需要的属性，一个一个绑好。js代码
因为把共用的部分都提取出去了，所以需要写的代码就非常少了。
定义两个属性，属性的具体定义放在共用函数里面，这里就很简洁了。
setup里面就是获取变量和方法，然后return就可以了。
其难点就是如何处理控件需要的各种属性，需要一个一个绑定好，这是一个辛苦活，需要一个一个对照。
有些属性还需要做一些转换。不过都搞定后，以后用着就非常方便了。
复选组
<!--多选组-->
<template>
<el-checkbox-group v-model="checks" @change="myInput">
<el-checkbox :label="3">备选项</el-checkbox>
<el-checkbox :label="6">备选项</el-checkbox>
<el-checkbox :label="9">备选项</el-checkbox>
</el-checkbox-group>
</template>
import inputManage from '../manage/inputManage.js'
import { metaInput } from '../manage/config.js'
import { ref } from 'vue'
export default {
name: 'nf-el-from-checkbox',
props: {
modelValue: String,
meta: metaInput
},
emits: ['input', 'change', 'blur', 'focus', 'clear'],
setup (props, context) {
const { value, myInput } = inputManage(props, context)
const checks = ref([])
return {
value,
myInput,
checks
}
}
}
这个稍微有点不同，因为控件的值不是string，而是一个数组，所以需要单独设置一个数组来中转一下。
如果组件有不同的需求，稍微做点修改就好。实在不行重做一个也行。js就是比较随意。。。
其他的就不一一贴了，大同小异。
表单页面里使用控件
都封装好了，那么如何使用呢？
首先要引用进来，然后设置属性就可以了，比如这样。
<el-form ref="form" :model="model" label-width="80px">
<el-form-item label="活动名称">
<eltext v-model="model.name" :meta="metaText"/>
</el-form-item>
<el-form-item label="活动网址">
<elurl v-model="model.url" :meta="metaText" @input="myChange"/>
</el-form-item>
<el-form-item label="年龄要求">
<elnumber v-model="model.age" :meta="metaText" @input="myChange"/>
</el-form-item>
<el-form-item label="年龄要求">
<elrange v-model="model.age" :meta="metaText" @input="myChange"/>
</el-form-item>
<el-form-item label="活动区域">
<elselect v-model="model.select" :meta="metaText" @input="myChange"/>
</el-form-item>
<el-form-item label="活动日期">
<eldate v-model="model.date" :meta="metaText" @input="myChange"/> -
<eltime v-model="model.time" :meta="metaText" @input="myChange"/>
</el-form-item>
<el-form-item label="即时配送">
<elradios v-model="model.radio" :meta="metaText" @input="myChange"/>
</el-form-item>
<el-form-item label="活动性质">
<elcheckbox v-model="model.checks" :meta="metaText" @input="myChange"/>
</el-form-item>
<el-form-item label="特殊资源">
<elswitch v-model="model.switch" :meta="metaText" @input="myChange"/>
</el-form-item>
<el-form-item label="活动形式">
<elarea v-model="model.contact" :meta="metaText" @input="myChange"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
本来写了一个el-row版本的，但是代码太长，直接写el-form版的吧。
import { reactive } from 'vue'
import eltext from '@/components/nf-el-form/input-text.vue'
import elarea from '@/components/nf-el-form/textarea.vue'
import elurl from '@/components/nf-el-form/url.vue'
import elnumber from '@/components/nf-el-form/input-number.vue'
import elrange from '@/components/nf-el-form/input-range.vue'
import eldate from '@/components/nf-el-form/input-date.vue'
import eltime from '@/components/nf-el-form/input-time.vue'
import elradios from '@/components/nf-el-form/radios.vue'
import elcheckbox from '@/components/nf-el-form/checkbox.vue'
import elselect from '@/components/nf-el-form/select.vue'
import elswitch from '@/components/nf-el-form/switch.vue'
export default {
name: 'eleBase',
components: {
eltext,
elarea,
elurl,
elnumber,
elrange,
eldate,
eltime,
elradios,
elcheckbox,
elselect,
elswitch
},
setup () {
// 定义表单实体类
const model = reactive({
age: 1,
url: '',
name: '',
contact: '',
date: null,
time: null,
radio: 1,
checks: [],
select: 1,
switch: true
})
// 定义样式
const formTitleStyle = {
'text-align': 'right',
'padding-right': '10px'
}
// 控件类型的属性
const metaText = reactive({
controlId: 103,
colName: 'controlType',
controlType: 190,
optionList: [],
isClear: false,
disabled: false,
required: true,
pattern: '',
title: '组件类型',
placeholder: '请输入组件类型',
maxlength: 100,
readonly: false
})
const myChange = (e) => {
// alert(e)
console.log('changele')
}
return {
model,
formTitleStyle,
metaText,
myChange
}
}
}
首先是注册组件，然后定义组件需要的属性，然后return就可以了。
能不能简化？
当然可以了，这样的代码对于我这么懒的人，还是太麻烦了。
那么如何简化呢？这个有很多种方法，比如v-for，比如做一个单独的表单组件。
总之方法有很多，具体方法，下次再说。
先看看效果图：
004表单效果.png
看图是不是感觉没啥特别的，这个嘛看效果当然没啥特别的了，关键是代码如何实现的，你说对不。
