微代码(低代码)移动前端库 jsonvue-mobile 使用指南
目录
项目地址：
演示地址
点我直达
安装和初始化：
使用说明：
fieldList配置示例
配置后展示效果：
表单验证的方式：
验证效果截图：
联动说明：
表单组件
ModuleField
联动方式
props
events
ModuleFieldReactive
联动方式
props
内置组件
所有内置组件的通用属性
props
FieldText 输入框
props
FieldDate 日期时间选择
props
FieldAddress 地址选择器
props
FieldSelect 下拉选择器
props
FieldCheckBoxSelect 下拉选择器-搜索式
图例：
props
FieldCrud
图例
props
示例配置
展示效果
示例代码：jsonvue-mobile-demo: jsonvue-mobile使用demo
项目地址：
jsonvue-mobile: jsonvue-mobile 是基于Vue2 和 Vant 的移动端微代码表单库，仅需少许配置即可生成对应的表单页面。更专注于表单字段联动设计提供多种联动方式（命令式和响应式）
演示地址
点我直达
安装和初始化：
npm install jsonvue-mobile [email protected] [email protected]//引入vant
import Vant from 'vant';
import 'vant/lib/index.css';
//引入vee-validate
import {ValidationObserver,ValidationProvider，extend,localize} from "vee-validate";
Vue.component('ValidationProvider',ValidationProvider)
Vue.component('ValidationObserver',ValidationObserver)
//引入jsonvue-mobile
import JSONVIEW from 'jsonvue-mobile'
import 'jsonvue-mobile/dist/components.esm.css'
Vue.use(JSONVIEW)
JSONVIEW.initValidate(extend,localize)使用说明：
在template中引入表单组件ModuleFiled即可
其中fieldList为表单字段配置列表 onCell为联动回调方法
fieldList配置示例
[
{
label:'Text组件INT类型',
textFieldType:'int',
fieldValue:'',
fieldName:'title1',
fieldType:'digit',
required:true,
labelWidth: 120
},
{
label:'Money类型',
textFieldType:'',
fieldValue:'',
fieldName:'money',
fieldType:'amount',
required:true
},
{
label:'Number类型',
textFieldType:'number',
fieldValue:'',
fieldName:'number',
fieldType:'number',
required:true,
precision:1
},
]配置后展示效果：
表单验证的方式：
this.$refs.form
.validate()
.then(success=>{
if (success) {
console.log('验证成功')
} else {
console.log('验证失败')
}
}验证效果截图：
联动说明：
表单字段值变化时会触发onCell方法此时只需要找到fieldList中的其他表单字段修改对应的配置即可实现联动，示例代码如下
例：当字段title变化时，把值赋值给字段titleCopy
onCell(fieldVal,item){
if (item.fieldName === 'title') {
const titleCopy = this.fieldList.find(item=>item.fieldName === 'titleCopy') || {}
titleCopy.fieldValue = fieldVal
}
}更多细节请看：jsonvue-mobile 联动方式说明。-CSDN博客
表单组件
ModuleField
联动方式
命令式 使用 onCell方法进行联动
props
| props属性名 | 说明 | 类型 | 默认值 |
| fieldList | 表单配置列表 | Array | [] |
| showDivider | 是否显示分割线（表单字段之间） |
events
| 事件名称 | 说明 | 回调参数 | |
| onCell | 表单值变化时的触发的方法 | （fieldVal,item） 其中第一个参数为表单字段变化的值，第二个参数为该表单的配置项信息 | |
| paramsChange | 加载网络数据之前触发的方法，一般用于修改请求的入参 | （item） 其中item包含该表单字段的配置 |
ModuleFieldReactive
联动方式
响应式 使用 watch 进行监听
props
| props属性名 | 说明 | 类型 | 默认值 |
| fieldList | 表单配置列表 | Array | [] |
内置组件
所有内置组件的通用属性
props
| 参数 | 说明 | 可选值 | 默认值 |
| tip | 字段提示信息 | ||
| tipLocation | 字段提示信息显示的位置 | right/bottom | right(默认显示一个问号的小图标） |
| labelAlign | 标签文本显示的位置 | left/top （left 左右布局，top 上下布局） | left（默认是左右结构，文本在左边） |
| inputAlign | 内容的显示位置 | right/left | right |
| errorMessageAlign | 错误信息的显示位置 | right/left | right |
FieldText 输入框
props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| fieldValue | 字段值（v-model对应的绑定值） | String/Number | ||
| fieldType | 字段类型 | String | text/textarea /digit/amount/number |
|
| placeholder | 输入框占位文本 | String | 请输入+fieldName | |
| fieldName | 字段名称 | String | ||
| validateRules | 校验规格 | Object | ||
| required | 是否必填 | Boolean | false/true | false |
| precision | 精度（仅当fieldType为Number时生效） | Number | 2 |
FieldDate 日期时间选择
props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| fieldValue | 字段值（v-model对应的绑定值） | String/Number | ||
| fieldType | 字段类型 | String | data/datetime/year-month/time | |
| placeholder | 输入框占位文本 | String | 请输入+fieldName | |
| fieldName | 字段名称 | String | ||
| required | 是否必填 | Boolean | false/true | false |
| labelWidth | 字段文本长度 | Number |
FieldAddress 地址选择器
props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| fieldValue | 字段值（v-model对应的绑定值） | String/Number | ||
| fieldType | 字段类型 | String | address | |
| placeholder | 输入框占位文本 | String | 请输入+fieldName | |
| fieldName | 字段名称 | String | ||
| required | 是否必填 | Boolean | false/true | false |
FieldSelect 下拉选择器
props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| fieldValue | 字段值（v-model对应的绑定值） | String/Number | ||
| fieldType | 字段类型 | String | select |
|
| placeholder | 输入框占位文本 | String | 请输入+fieldName | |
| fieldName | 字段名称 | String | ||
| required | 是否必填 | Boolean | false/true | false |
| optionCodes | 下拉选择列表（本地写死的方式） | Array (里面的单项格式为{name:'',id:''}) | [] | |
| getType | 数据加载方式（可选本地或者远程） | String | code/url | code（默认本地数据加载的方式） |
| postUrl | 远程方法加载的URL | String | ||
| refreshWhenClick | 是否每次点击时都去加载 | Boolean | false/true | false |
| paramsChange | 远程加载前的请求参数处理事件 | String(JOSN格式的String) |
FieldCheckBoxSelect 下拉选择器-搜索式
图例：
props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| fieldValue | 字段值（v-model对应的绑定值） | String/Number | ||
| fieldType | 字段类型 | String | tree | |
| placeholder | 输入框占位文本 | String | 请输入+fieldName | |
| fieldName | 字段名称 | String | ||
| required | 是否必填 | Boolean | false/true | false |
| postUrl | 远程加载的URL | String |
FieldCrud
图例
props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| fieldValue | 字段值（v-model对应的绑定值） | String/Number | ||
| fieldType | 字段类型 | String | fieldCrud | |
| placeholder | 输入框占位文本 | String | 请输入+fieldName | |
| fieldName | 字段名称 | String | ||
| required | 是否必填 | Boolean | false/true | false |
示例配置
//字段列表
fieldList:[
{
label:'考试标题主表',
type:'text',
fieldValue:'',
fieldName:'title',
fieldType:'text',
required:true
},
{
label:'Text组件INT类型',
textFieldType:'int',
fieldValue:'',
fieldName:'title1',
fieldType:'digit',
required:true,
labelWidth: 120
},
{
label:'Money类型',
textFieldType:'',
fieldValue:'',
fieldName:'money',
fieldType:'amount',
required:true
},
{
label:'Number类型',
textFieldType:'number',
fieldValue:'',
fieldName:'number',
fieldType:'number',
required:true,
precision:1
},
{
label:'考试标题备份',
type:'text',
fieldValue:'Copy',
fieldName:'titleCopy',
fieldType:'text',
required:true
},
{
label:'考试类型',
fieldType:'select',
fieldName: 'type',
required: false,
postUrl:'/dict/examType',
getType:'url',
refreshWhenClick: true
},
{
label:'考试节奏',
fieldType:'select',
fieldName: 'type11',
required: false,
getType:'url',
refreshWhenClick: true,
httpFunction:async ()=>{
const resp = await this.$post('/dict/examType1')
return resp.data.list
}
},
{
label:'考试地点',
fieldType: 'address',
fieldName: 'address',
required: false,
selectLevel:3,
showProvinceName: true
},
{
label:'考试科目',
fieldName:'kemu',
formSlot:true,
required: true
},
{
label:'考试日期',
fieldType:'date',
fieldName: 'date',
fieldValue: '',
required: true
},
{
label:'考试日期和时间',
fieldType:'datetime',
fieldName: 'datetime',
fieldValue: '',
required: true,
labelWidth: 100
},
{
label:'考试时间Time',
fieldType:'time',
fieldName: 'time',
fieldValue: '',
required: true
},
{
label:'远程搜索方式',
fieldType:'tree',
fieldName: 'tree',
fieldValue: '',
required: true,
postUrl: '/dict/remoteSearch',
config:{
configName:'',
showName:true
},
useItemSlot:true
},
{
label:'远程搜索刷新',
fieldType:'tree',
fieldName: 'tree1',
fieldValue: '',
required: true,
postUrl: '/dict/remoteSearch',
config:{
configName:'',
showName:true
},
useItemSlot:true,
refreshWhenClick:true,//每次都刷新数据
},
{
label:'收款人信息',
fieldType:'fieldCrud',
fieldName: 'crud',
fieldValue: [],
required: true,
crudViewSlot:false,
crudEditFunc:'',
showMoney:true,
typeList:[
{
name:'类型一',
code:'code1'
},
],
typeSecondModuleList:[
{
type:'reimbType',
name:'类型1',
code:'code1',
moduleList:[
{
label:'考试标题',
type:'text',
fieldValue:'',
fieldName:'title',
fieldType:'text',
required:true,
config:{}
},
{
label:'考试标题备份',
type:'text',
fieldValue:'Copy',
fieldName:'titleCopy',
fieldType:'text',
required:true,
config:{}
},
{
label:'考试类型',
fieldType:'select',
fieldName: 'type',
required: false,
config:{},
optionCodes:[
{
name:'英语',
code:'yingyu'
},
{
name:'法语',
code:'fayu'
}
]
},
{
label:'考试费用',
fieldValue:'',
fieldName:'examAmount',
fieldType:'amount',
required:true,
isSum:true,
config:{}
},
{
label:'考试类型1',
fieldType:'select',
fieldName: 'type1',
required: false,
config:{},
optionCodes:[
{
name:'英语',
code:'yingyu'
},
{
name:'法语',
code:'fayu'
}
]
},
]
}
],
typeSecondEditPageList:[
{
type:'reimbType',
code:'code1',
name:'类型一',
list:[
[
{
label:'考试标题',
type:'text',
fieldValue:'',
fieldName:'title',
fieldType:'text',
required:true,
config:{}
},
{
label:'考试标题备份',
type:'text',
fieldValue:'Copy',
fieldName:'titleCopy',
fieldType:'text',
required:true,
config:{}
},
{
label:'考试类型',
fieldType:'select',
fieldName: 'type',
required: false,
config:{},
optionCodes:[
{
name:'英语',
code:'yingyu'
},
{
name:'法语',
code:'fayu'
}
]
},
]
]
}
],
typeSecondShowPageList:[
// {
// type:'reimbType',
// code:'code1',
// name:'类型一',
// list:[
// [
// {
// label:'考试标题',
// type:'text',
// fieldValue:'',
// fieldName:'title',
// fieldType:'text',
// required:true,
// config:{}
// },
// {
// label:'考试标题备份',
// type:'text',
// fieldValue:'Copy',
// fieldName:'titleCopy',
// fieldType:'text',
// required:true,
// config:{}
// },
// {
// label:'考试类型',
// fieldType:'select',
// fieldName: 'type',
// required: false,
// config:{},
// optionCodes:[
// {
// name:'英语',
// code:'yingyu'
// },
// {
// name:'法语',
// code:'fayu'
// }
// ]
// },
// ]
// ]
// }
],
config:{
configName:'',
showName:true
}
},
{
label:'考试结束时间Time',
fieldType:'time',
fieldName: 'endTime',
fieldValue: '',
required: true,
labelWidth:150
},
{
label:'项目信息',
fieldType:'fieldCrud',
fieldName: 'projectCrud',
fieldValue: [],
required: true,
crudViewSlot:false,
crudEditFunc:'',
showMoney:true,
typeList:[
{
name:'类型一',
code:'type1'
},
],
typeSecondModuleList:[
{
type:'reimbType',
name:'类型1',
code:'type1',
moduleList:[
{
label:'项目名称',
type:'text',
fieldValue:'',
fieldName:'title',
fieldType:'text',
required:true,
config:{}
},
{
label:'项目类型',
fieldType:'select',
fieldName: 'type',
required: false,
config:{},
optionCodes:[
{
name:'外部项目',
code:'yingyu'
},
{
name:'内部项目',
code:'fayu'
}
]
},
{
label:'项目预算',
fieldValue:'',
fieldName:'examAmount',
fieldType:'amount',
required:true,
isSum:true,
config:{}
},
]
}
],
typeSecondShowPageList:[
],
config:{
configName:'',
showName:true
}
},
],