微代码(低代码)移动前端库 jsonvue-mobile 使用指南

发布时间：2024年01月09日

项目地址：

?安装和初始化：

?使用说明：

FieldCheckBoxSelect 下拉选择器-搜索式

?示例代码：jsonvue-mobile-demo: jsonvue-mobile使用demo

项目地址：

jsonvue-mobile: jsonvue-mobile 是基于Vue2 和 Vant 的移动端微代码表单库，仅需少许配置即可生成对应的表单页面。更专注于表单字段联动设计提供多种联动方式（命令式和响应式）

?安装和初始化：

npm install jsonvue-mobile vant@2.11.0 vee-validate@3.4.15

//引入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即可

<template>
    <ModuleField ref="form" :fieldList="fieldList" @onCell="onCell">
</template>

?其中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中的其他表单字段修改对应的配置即可实现联动，示例代码如下

 onCell(fieldVal,item){
      if (item.fieldName === 'title') {
        const titleCopy = this.fieldList.find(item=>item.fieldName === 'titleCopy') || {}
        titleCopy.fieldValue = fieldVal
      }
}

表单组件

ModuleField

props

props属性名	说明	类型	默认值
fieldList	表单配置列表	Array	[]

events

事件名称	说明	回调参数
onCell	表单值变化时的触发的方法	（fieldVal,item）其中第一个参数为表单字段变化的值，第二个参数为该表单的配置项信息

ModuleFieldReactive?

内置组件

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

FieldDate 日期时间选择

? props

参数	说明	类型	可选值	默认值
fieldValue????????????????	字段值（v-model对应的绑定值）	String/Number
fieldType	字段类型	String	data/datetime/year-month/time
placeholder	输入框占位文本	String		请输入+fieldName
fieldName	字段名称	String
required????????	是否必填	Boolean	false/true	false

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	text/textarea/digit/amount/number
placeholder	输入框占位文本	String		请输入+fieldName
fieldName	字段名称	String
required	是否必填	Boolean????????	false/true	false

FieldCheckBoxSelect 下拉选择器-搜索式

?图例：

? ?props

参数	说明	类型	可选值	默认值
fieldValue????????????????	字段值（v-model对应的绑定值）	String/Number
fieldType	字段类型	String	tree
placeholder	输入框占位文本	String		请输入+fieldName
fieldName	字段名称	String
required	是否必填	Boolean	false/true	false

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
          }
        },
      ],

?展示效果

?示例代码：jsonvue-mobile-demo: jsonvue-mobile使用demo

文章来源:https://blog.csdn.net/u011663865/article/details/135463025
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！