演示地址
下载地址

常年做web系统端，对web系统端的功能布局等有很深刻的了解，经常cv一些表单标签改来改去比较繁琐，重复性很多，且样式布局啥的几乎万变不离其中，为了偷懒，开发了mosowe-form及mosowe-table两款高级组件，其思路借鉴了antdesign的高级组件。

这里面依赖的组件基本是uniapp官方的和自己二次封装的：

依赖组件

uni-form
uni-data-picker
uni-datetime-picker
uni-file-picker
uni-easyinput
uni-datetime-picker
uni-data-select
uni-data-picker
uni-data-checkbox
uni-combox
uni-popup
uni-row
uni-col
mosowe-editor

在线演示

props

formConfig

uni-form配置数据

optionItem

nameConfig

typeString

emits

slots

示例代码

<template><view class="index-page"><mosowe-form:options="formOptions"ref="mosoweFormRef":groupCol="{span: 12}"@submit="submit"@reset="reset"@change="change"></mosowe-form></view>
</template><script setup lang="ts">
import { ref } from 'vue';const mosoweFormRef = ref<any>(null)const submit = (data:any) => {console.log('submit',data)
}const reset = (data:any) => {console.log('reset',data)
}
const formOptions = ref({formConfig:{'label-width': '100px','label-align': 'right'},list:[{subTitle: '表单分组一',col:{span: 24},items:{name:{type:'input',defaultValue: '测试',col:{span: 12},unionName: 'address=哈哈哈&sex=~1',typeProps:{placeholder:'请输入'},formItemProps:{label:'测试',required:true,rules:[{required:true,errorMessage: '请填写姓名'}]}},address:{type:'input',col:{span: 12},defaultValue: null,typeProps:{primaryColor:'#999999',autoHeight:true,type:'textarea',placeholder:"写这里",placeholderStyle:"color:#ff0000",},formItemProps:{label:'文本域',}},editor:{type:'editor',defaultValue: '<p>11112222<strong>22</strong></p>',typeProps:{},formItemProps:{label:'编辑器',}}}},{subTitle: '表单分组二',items:{sex:{type:'select',defaultValue: '',unionName: 'address-哈哈哈，你是谁',typeProps:{placeholder:'请选择',localdata:[{value:0,text:'男'},{value:1,text:'女'},{value:2,text:'未知',},]},formItemProps:{label:'性别',}},city:{type: 'combox',defaultValue: '',unionName: 'address=combox',typeProps:{candidates:['北京','重庆','上海','南京','天津']},formItemProps:{label:'城市',}},chooseR:{type: 'radio',defaultValue: '',typeProps:{localdata:[{"value": 0,"text": "篮球"  },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"},]},formItemProps:{label:'单选',}},switchData:{type:'switch',defaultValue: true,formItemProps:{label:'开关',}},sliderData:{type:'slider',defaultValue: 20,typeProps:{'show-value':true},formItemProps:{label:'滑块',}},date:{type:'date',defaultValue: '',typeProps:{},formItemProps:{label:'日期',}},daterange:{type:'date',defaultValue: '',typeProps:{type:'daterange'},formItemProps:{label:'日期范围',}},datetime:{type:'date',defaultValue: '',typeProps:{type:'datetime'},formItemProps:{label:'日期时间',}},datetimerange:{type:'date',defaultValue: '',typeProps:{type:'datetimerange'},formItemProps:{label:'日期时间范围',}},time:{type:'picker',defaultValue: '12:00',typeProps:{mode: 'time',start:'00:00',end:'13:59'},formItemProps:{label:'时间',}},pickerdate:{type:'picker',defaultValue: '2023-03',typeProps:{mode: 'date',fields:'month'},formItemProps:{label:'月份',}},cascade:{type:'cascade',defaultValue: [],typeProps:{localdata:[{text: "一年级",value: "1-0",children: [{text: "1.1班",value: "1-1"},{text: "1.2班",value: "1-2"}]},{text: "二年级",value: "2-0",children: [{text: "2.1班",value: "2-1"},{text: "2.2班",value: "2-2"}]},{text: "三年级",value: "3-0",disable: true}]},formItemProps:{label:'级联',}},file:{type:"upload",defaultValue:{extname: "png",name: "1111111.png",url: "https:..." // 改成实际地址},typeProps:{'return-type':'object'},formItemProps:{label: '文件上传'}},fileArr:{type:"upload",defaultValue:[{extname: "png",name: "1111111.png",url: "https:..." // 改成实际地址}],typeProps:{},formItemProps:{label: '文件上传'}},fileArrNo:{type:"upload",defaultValue:'',typeProps:{},formItemProps:{label: '文件上传'}},}}]
})const change = (name:string,value:any) =>{console.log('change',name,value)if (name === 'chooseR') {formOptions.value.list[1].items.city.typeProps.candidates = ['北京','重庆',value]}
}
</script><style lang="scss" scoped></style>