MagicBox Form Core

一个基于 Vue 2 和 Element UI 的高度可配置表单生成组件。

安装

``bash
npm install magicbox-form-core --save
`

引入

$3

`javascript
import Vue from 'vue';
import MagicboxFormCore from 'magicbox-form-core';

Vue.use(MagicboxFormCore);
`

$3

`javascript
import { MagicboxFormCore } from 'magicbox-form-core';

export default {
components: {
MagicboxFormCore
}
}
`

基本用法

`vue



`

组件属性

| 属性名 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| renderdata | 表单渲染配置对象 | Object | {} |
| value | 表单数据对象 (v-model) | Object | {} |
| parentInstance | 父组件实例 | Object | null |

组件方法

| 方法名 | 说明 | 参数 |
|------|------|------|
| validate | 表单验证 | callback(Function) - 验证完成后的回调函数 |

配置说明

$3

`javascript
{
// 表单属性配置
formProps: {
labelWidth: '120px', // 标签宽度
size: 'medium' // 尺寸大小，可选值：medium / small / mini
// 其他 el-form 支持的属性...
},

// 表单项列表
itemRenderList: [
{
// 元素配置
__element__: {
tag: 'el-input', // 使用的 Element UI 组件名称
key: 'fieldName', // 字段名，对应 formData 中的属性
value: '', // 默认值
attrs: { // 传递给组件的属性
placeholder: '请输入'
// 其他组件属性...
}
},

// 标签配置
__label__: {
label: '字段名称' // 表单项标签文本
},

// 验证规则
__regrule__: {
required: true, // 是否必填
regList: [ // 验证规则列表
{
pattern: '/^\\w+$/', // 正则表达式
message: '格式不正确' // 错误提示
}
// 更多规则...
]
},

// 插槽占位符配置（可选）
slot: 'slotName',
__slotRules__: {
prop: 'slotFieldName', // 插槽字段名
rules: [ // 验证规则
{ required: true, message: '不能为空' }
]
}
}
// 更多表单项...
]
}
``

注意事项

1. 组件依赖 Vue 2.6+ 和 Element UI 2.15+
2. 请确保 Element UI 已正确安装并注册
3. 表单验证规则遵循 Element UI 的表单验证规则格式