为摸鱼助力：一份Vue3的生成式ElementPlus表单组件
目录
一、实现背景
二、简介
三、组织架构设计
四、实现方式
五、代码示例
六、示例代码效果预览
七、项目预览地址 & 项目源码地址
目前项目还有诸多待完善的地方，大家有好的想法、建议、意见等欢迎再次评论，或于github提交Issues
一、实现背景
一切为了摸鱼而努力！！！
在现代Web应用程序中，表单组件是不可或缺的一部分。但是，手动创建每个表单项是一个非常繁琐的过程。为此，我提供了一个基于Vue3的可配置的表单组件，帮助您快速构建表单，无需手动编写HTML或JavaScript代码。这篇文章将向您展示如何使用JSON配置文件一站式生成Vue3 Form表单组件，并在项目中使用它。
二、简介
此表单组件是目前内嵌在一个基础项目中的，并没有作单独的npm包进行发布，因为目前是一个比较简单且基础的版本，需要优化的点还非常多。希望大家能多多提出宝贵的意见或建议，本文主要是针对实现思路等进行描述。
目前实现功能：栅格化布局、监听单个表单数据变化、Form 表单除upload外的所有子组件。
通过JSON配置一站式生成form表单，该组件保留了ElementPlus全部的使用习惯和使用方式，对ElementPlus原功能进行了完美的保留，支持所有属性设置（方法使用统一事件监听替代）
三、组织架构设计
在当前的表单组件中，数据层、UI层、事件层等模块相互独立，通过交互来协调和通信。
其中，数据层负责存储和管理表单组件的数据；UI层负责渲染表单组件的外观；事件层负责处理用户与表单组件互动时的事件。通过这种方式，我们实现了一个高度可扩展和可重用的表单组件。
四、实现方式
Vue3支持使用JSX/TSX语法，通过JSX/TSX（我这里使用的是TSX）进行不同表单组件的生成，枚举出Form表单的所有子组件。这里采用TSX的方式可以避免每一种组件都要去写一份Vue文件；
通过匹配组件类型，生成对应的每一个表单组件；
为保留ElementPlus组件所有属性，需要采用透传的方式，去列出每一个组件所可能用到的属性显然是不明智的；
布局排版的生成采用el-row、el-col实现栅格布局，可通过配置进行动态调整；
ElementPlus表单组件中的所有方法显然不是那么好处理的，因此使用同一个方法去监听每个表单项的变化，并提供给“用户”此时变化的key、newVal以及oldVal，这里采用Proxy进行了数据拦截；
提供一个表单校验和重置表单数据的方法。
某些ElementPlus表单组件中会提供一些插槽给用户使用，因此这些插槽也需要保留下来
组件生成示例：
case 'el-input':
return (
五、代码示例
- 配置项数据
const FormConfig = reactive({
rowConfigBind: {
gutter: 20,
colSpan: 8
// className: 'row-class'
},
formConfigBind: {
labelPosition: 'top'
},
colsList: [
{
label: '一个普通的输入框',
colSpan: 8,
type: 'el-input',
specificType: 'text',
bindObj: {
placeholder: '请输入文字',
formatter: (value: any) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
parser: (value: any) => value.replace(/\$\s?|(,*)/g, '')
},
key: 'name'
},
{
label: '一个普通的输入框',
htmlLabel:
'\n' +
' 自定义tooltip效果\n' +
' \n' +
' 这是自己定义的tooltip\n' +
' \n' +
' \n' +
'\n' +
' \n',
colSpan: 8,
type: 'el-input',
specificType: 'text',
bindObj: {
placeholder: '请输入文字',
formatter: (value: any) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
parser: (value: any) => value.replace(/\$\s?|(,*)/g, '')
},
key: 'name2'
},
{
label: '添加了append文字的输入框',
colSpan: 8,
type: 'el-input',
bindObj: {
placeholder: '请输入'
},
rules: [
{
required: true,
message: '请输入',
trigger: 'change'
}
],
slots: [
{
name: 'append',
content: '.com'
}
],
key: 'comAdress'
},
{
label: '添加了append JSX组件的输入框',
colSpan: 8,
type: 'el-input',
bindObj: {
placeholder: '请输入'
},
slots: [
{
name: 'append',
content: TestTSXComp
}
],
key: 'appendJSXComp'
},
{
label: '添加了append Vue组件的输入框',
colSpan: 8,
type: 'el-input',
bindObj: {
placeholder: '请输入'
},
slots: [
{
name: 'append',
content: TestVueComp
}
],
key: 'appendVueComp'
},
{
label: '数字输入框',
colSpan: 4,
type: 'el-input-number',
bindObj: {
placeholder: '请输入'
},
key: 'inputNumberVal'
},
{
label: '测试表单生成函数',
type: 'slots',
key: 'content',
colSpan: 24
},
{
label: '下拉选',
colSpan: 8,
type: 'el-select',
bindObj: {
placeholder: '请选择',
multiple: true
},
options: [
{
label: '第一个选项',
value: 'A',
bindObj: {
disabled: true
}
},
{
label: '第二个选项',
value: 'B'
},
{
label: '第三个选项',
value: 'C'
}
],
key: 'optionValue'
},
{
label: '单选框',
colSpan: 8,
type: 'el-radio',
options: [
{
label: '第一个选项',
value: 'A',
bindObj: {
disabled: true
}
},
{
label: '第二个选项',
value: 'B'
},
{
label: '第三个选项',
value: 'C'
}
],
key: 'radioValue'
},
{
label: '按钮单选框',
colSpan: 8,
type: 'el-radio',
bindObj: {
textColor: 'red'
},
options: [
{
label: '第一个选项',
value: 'A',
isButton: true
},
{
label: '第二个选项',
value: 'B',
isButton: true
},
{
label: '第三个选项',
value: 'C',
isButton: true // 如果是button样式展示，那么设置此属性为true
}
],
key: 'radioBtnValue'
},
{
label: '自动补全输入框',
colSpan: 8,
type: 'el-autocomplete',
bindObj: {},
querySearchFun: querySearchFun,
key: 'autocompleteValue'
},
{
label: '日期选择框',
colSpan: 8,
type: 'el-date-picker',
specificType: 'date',
bindObj: {},
key: 'detePickerValue'
},
{
label: '日期时间选择框',
colSpan: 8,
type: 'el-date-picker',
specificType: 'datetime',
bindObj: {},
key: 'deteTimePickerValue'
},
{
label: '评分',
colSpan: 8,
type: 'el-rate',
bindObj: {
voidIcon: 'ChatRound',
colors: ['#409eff', '#67c23a', '#FF9900'],
icons: [ChatRound, ChatLineRound, ChatDotRound]
},
key: 'rateValue'
},
{
label: '滑块',
colSpan: 8,
type: 'el-slider',
bindObj: {
showInput: true
},
key: 'elSliderValue'
},
{
label: '开关',
colSpan: 8,
type: 'el-switch',
bindObj: {
style: '--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949'
},
key: 'elSwitchValue'
},
{
label: '时间选择器',
colSpan: 4,
type: 'el-time-picker',
key: 'timePickerValue'
},
{
label: '时间选择',
colSpan: 4,
type: 'el-time-select',
key: 'timeSelectValue'
}
]
})- 表单数据
// 数据定义
const formData = reactive({
name: '',
comAdress: '',
inputNumberVal: '',
appendJSXComp: '',
appendVueComp: '',
optionValue: [],
autocompleteValue: ''
})- 组件应用
这是插槽的内容
- watcherFun
// 监听数据变化的方法
const watcherFun = (key: string, oldVal: any, newVal: any) => {
console.log(
'监听到数据变化',
`当前变化的key是: ${key}, 它的旧值是: ${oldVal}, 它的新值是: ${newVal}`
)
}六、示例代码效果预览
七、项目预览地址 & 项目源码地址
项目预览地址：http://1.14.75.249/
项目源码地址：https://github.com/zuotiandeni/lcyBlog