0.1.5 • Published 5 years ago
json-config-form v0.1.5
jsonForm
Project setup
npm installCompiles and hot-reloads for development
npm run serveCompiles and minifies for production
npm run buildLints and fixes files
npm run lintRun your unit tests
npm run test:unit表单组件
具体示例 demo
安装与使用方式
npm install json-config-form --saveimport jsonConfigForm from 'json-config-form'如需全局引用则全局注册，如单个引用则单个components注册
组件传参：
| 字段 | 类型 | 是否必填 | 注释 |
|---|---|---|---|
| ref | -- | -- | 用于获取dom，进行validate验证 |
| formSchema | Object | 是 | 用于渲染form的参数 |
例如：
<json-config-form ref="myDemoForm" :formSchema="formSchema"></json-config-form>formSchema内部参数列表：
| 字段 | 类型 | 是否必填 | 注释 |
|---|---|---|---|
| labelWidth | 数字 | -- | label的宽度 |
| properties | Object | 是 | 用于渲染form列表的参数，后台参数字段为键值，配置为值，如name:{ ... } |
properties的值通用参数列表：
| 字段 | 类型 | 是否必填 | 注释 |
|---|---|---|---|
| type | string | 是 | 表单类型，input，textarea，number，select，cascader，datepicker，timepicker，radio，check，switch，slot（插槽类型） |
| inputType | string | -- | input类型，默认为text，常用还有password，email，url |
| dateType | string | -- | date，time类型，daterange等 |
| value | -- | 是 | 对应的数据，与后台对接的数据 |
| defaultValue | -- | -- | 初始数据 |
| disabled | boolean | -- | 是否禁用 |
| ui | object | 是 | ui类配置，不同类型具体配置详见代码示例 |
| rules | object | -- | 表单校验规则 |
| changeEv | function | -- | 组件内部值变化的回调函数，number，select，datepicker，timepicker，switch类型有回调 |
rules列表
| 字段 | 类型 | 是否必填 | 注释 |
|---|---|---|---|
| required | boolean | -- | 是否必填 |
| type | string | -- | 字段类型 |
| min | number | -- | 最小值，数字为值，其他类型为长度 |
| max | number | -- | 最大值，数字为值，其他类型为长度 |
| otherRules | 数组 | -- | 其他规则，参照async-validator |
select，radio,check中的list列表内必有id，name字段，id用于key，name用于label显示
formSchema内部参数代码示例：
formSchema: {
labelWidth: 80,//label宽度
properties: {
name: {
type: 'input', //* **必填 */
value: '', //* **必填 */
defaultValue: 'name',
disabled: true,
ui: {
offset: 1, // 偏移量
col: 23, // 占用格数，总分24格
label: 'first name',
placeholder: 'first name'
}，
rules: {
required: true,
// type: 'number',
// min:1,
max: 100,
otherRules: [{ pattern: /^1[345789]\d{9}$/, trigger: 'blur' }]
}
},
password: {
type: 'input',
inputType: 'password',
value: '',
ui: {
showLabel: false, //是否显示label，优先级高于label
label: 'password',
// col: 6,
placeholder: 'passowrd'
}
},
textarea: {
type: 'textarea',
value: '',
ui: {
label: 'textarea',
// col: 6,
placeholder: 'textarea',
minRows: 3, //最小行数
maxRows: 6 //最大行数
}
},
number: {
type: 'number',
value: 0,
ui: {
label: 'number',
col: 8,
precision: 2 // 精度
},
rules: {
min: 1,
max: 100,
type: 'number' //* **必填 */
}
},
select: {
type: 'select',
value: '',
ui: {
label: 'select',
col: 8,
list: [],
filterable: true, // 是否搜索
// hasEmptyOption: true, // 是否需要空项，用于展示列表‘全部’，‘请选择’等空项
sendField: 'code' // 发给后台的字段，默认发id
},
changeEv: (val) => { // 变化值的回调函数
console.log('select', val)
}
},
cascader: {
type: 'cascader',
value: [],
ui: {
label: 'cascader',
col: 8,
list: [
{
value: 'beijing',
label: '北京',
children: [
{
value: 'gugong',
label: '故宫'
},
{
value: 'tiantan',
label: '天坛'
},
{
value: 'wangfujing',
label: '王府井'
}
]
}
]
}
},
datepicker: {
type: 'datepicker',
dateType: 'daterange',
value: [],
ui: {
label: 'datepicker',
col: 8,
options: { // 日期选择配置
disabledDate (date) {
return date && date.valueOf() < Date.now() - 88400000
}
},
format: 'yyyy-MM-dd' //格式
},
changeEv: (params) => {
console.log('date', params)
}
},
timepicker: {
type: 'timepicker',
dateType: 'timerange',
value: [],
ui: {
label: 'timepicker',
col: 8,
format: 'HH:mm:ss'
},
changeEv: (params) => {
console.log('time', params)
}
},
radio: {
type: 'radio',
value: '',
ui: {
label: 'radio',
col: 8,
list: []
}
},
check: {
type: 'check',
value: [],
ui: {
label: 'check',
col: 8,
list: [
{
id: '123',
name: '数据'
}
]
}
},
switch: {
type: 'switch',
value: true,
ui: {
label: 'switch',
col: 8,
size: 'small'
},
changeEv: (params) => {
console.log('switch', params)
}
},
slot: { //插槽类型，适用于不属于上列类型之外的自定义组件等更灵活的组件
type: 'slot',
slotName: 'myItem',
ui: {
col: 8,
label: 'slot'
}
}
}
}
插槽类型示例（配置如上所述，dom如下所示）：
<json-config-form ref="myDemoForm" :formSchema="formSchema">
<div slot="myItem">
<Button>插槽示例</Button>
</div>
</json-config-form>表单校验
this.$refs.yourDomRefName.$emit('validateCommonForm',(valid)=>{
if (valid) {
console.log(1,this.sendCode.obj)
}else{
console.log(2)
}
})表单重置
this.$refs.yourDomRefName.$emit('resetCommonForm')