胡一菲说过，做巧克力很简单嘛，把商场里卖的巧克力买回来，融化后加点葡萄干、干果，然后再造型、凝固——巧克力就做好了。
是不是超简单？ 是的，在开源世界里面就是这么简单，我们完全可以在开源的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，比如做一个单独的表单组件。
总之方法有很多，具体方法，下次再说。
先看看效果图：
看图是不是感觉没啥特别的，这个嘛看效果当然没啥特别的了，关键是代码如何实现的，你说对不。
