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

2024-01-09 10:53:27

目录

项目地址:

?安装和初始化:

?使用说明:

fieldList配置示例

?配置后展示效果:

?表单验证的方式:

验证效果截图:

联动说明:?

表单组件

ModuleField

props

events

内置组件

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 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字段类型Stringtext/textarea/digit/amount/number
placeholder输入框占位文本String请输入+fieldName
fieldName字段名称String
validateRules校验规格Object
required是否必填Booleanfalse/truefalse

FieldDate 日期时间选择

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

FieldAddress 地址选择器

? ?props? ? ?
参数说明类型可选值默认值
fieldValue????????????????字段值(v-model对应的绑定值)String/Number
fieldType字段类型Stringaddress
placeholder输入框占位文本String请输入+fieldName
fieldName字段名称String
required????????是否必填Booleanfalse/truefalse

FieldSelect 下拉选择器

? props
参数说明类型可选值默认值
fieldValue????????????????字段值(v-model对应的绑定值)String/Number
fieldType字段类型Stringtext/textarea/digit/amount/number
placeholder输入框占位文本String请输入+fieldName
fieldName字段名称String
required是否必填Boolean????????false/truefalse

FieldCheckBoxSelect 下拉选择器-搜索式

?图例:

??

? ?props
参数说明类型可选值默认值
fieldValue????????????????字段值(v-model对应的绑定值)String/Number
fieldType字段类型Stringtree
placeholder输入框占位文本String请输入+fieldName
fieldName字段名称String
required是否必填Booleanfalse/truefalse

FieldCrud

? 图例

? ?props
参数说明类型可选值默认值
fieldValue????????????????字段值(v-model对应的绑定值)String/Number
fieldType字段类型StringfieldCrud
placeholder输入框占位文本String请输入+fieldName
fieldName字段名称String
required是否必填Booleanfalse/truefalse

示例配置

//字段列表
      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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。