uniapp的高级表单组件mosowe

2023-04-26 08:05| 来源: 网络整理| 查看: 265

uniapp的高级表单组件mosowe-form怎么使用发布时间：2023-04-24 16:50:03 来源：亿速云阅读：87 作者：iii 栏目：开发技术

本文小编为大家详细介绍“uniapp的高级表单组件mosowe-form怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“uniapp的高级表单组件mosowe-form怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

引言

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

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

依赖组件

uni-formuni-data-pickeruni-datetime-pickeruni-file-pickeruni-easyinputuni-datetime-pickeruni-data-selectuni-data-pickeruni-data-checkboxuni-comboxuni-popupuni-rowuni-colmosowe-editor

在线演示

props属性类型默认说明options{formConfig, list：optionItem[]}-表单配置项hideButtonbooleanfalse隐藏自带按钮readOnlybooleanfalse只读resetInterceptbooleanfalse重置表单前拦截filterEmptybooleanfalse提交时过滤空值groupColobject-表单分组布局，这里是统一配置，参考uni-colitemColobject表单项布局，这里是统一配置，参考uni-colbtnAlignstringleft底部提交按钮位置可选：left、right、centersubmitTextstring提交提交按钮文案resetTextstring重置重置按钮文案formConfiguni-form配置数据

optionItem

属性类型默认说明subTitlestring-表单分组标题，非必选colobject-表单分组布局，参考uni-colitemsobject-下一级为formItem的name（标记itemName），配置为nameConfig

nameConfig

属性类型默认说明typestring-表单类型，typeStringdefaultValueany-默认值colobject-该项布局，参考uni-colhidebooleanfalse隐藏该表单，不渲染在html中visiblebooleantrue显示该表单，display显隐typePropsobject即表单项类型type的props配置formItemPropsobjectuni-forms-item的props配置，配置项内的name不会成为uni-forms-item的name，会被itemName覆盖unionNamestring关联表单类型，editer及upload无效，多个unionName用&分割，注意前后没有空格，即当本itemName值改变时，相关表单的值清空或者赋值，赋值方式：[关联itemName]=defaultValue，defaultValue多个的话使用[]包裹(目前组件中没有多选功能)，若defaultValue值为number类型，则在值前添加一个~，例：sex=~1transformfunction提交时转化，一般来说都是吐给后端的存在数据库里的数据，参数为当前值

typeString

值说明input表单输入框，文本域，注意：uni-easyinput文档中少写了一个prop：primaryColor 设置主题色（默认#2979ff）select下拉选择，注意：uni-data-select文档中少写了一个prop：disabled 禁用combox组合框editor富文本编辑器，内部文件上传功能依赖云存储，需安装wangeditorradio单选+多选switch开关选择器date日期选择器slider滑动选择器pickerpicker选择器cascade级联选择器，仅限本地数据upload文件上传，会自动上传至当前云服务空间，若未使用unicloud云服务空间，则不使用该组件，非自动上传，点击提交时上传

emits

emits说明submit表单提交reset表单重置change表单项改变，返回表单项name及值slotsslot说明[itemName]DefaultformItem的default插槽[itemName]DefaultBeforeformItem的default插槽内前置插槽[itemName]DefaultAfterformItem的default插槽内后置插槽[itemName]LabelformItem的label插槽[itemName]LabelBeforeformItem的label插槽内前置插槽[itemName]LabelAfterformItem的label插槽内后置插槽button提交重置按钮区插槽，作用域参数为：submit，resetlineAfter最后一个表单项后面的插槽，将会与表单项内联展示，不独立占一行，作用域参数为：submit，reset

示例代码

import { ref } from 'vue'; const mosoweFormRef = ref(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: '

1111222222

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

读到这里，这篇“uniapp的高级表单组件mosowe-form怎么使用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。

推荐阅读：使用uniapp实现可以左右滑动的导航栏使用uniapp微信小程序实现一个页面多个倒计时

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：[email protected]进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

uniapp 上一篇新闻：有哪些好用的Javascript技巧下一篇新闻：Vue3怎么将组件手动渲染到指定元素中猜你喜欢 PHP如何向服务器上传文件 PHP如何实现创建、打开、读取、写入和关闭文件操作 PHP如何读取文件内容 PHP中创建目录mkdir()函数和删除目录rmdir()函数怎么用 PHP如何操作文件实现复制、移动、重命名和删除功能 PHP如何判断文件或目录是否存在 PHP循环遍历数组的方法有哪些 PHP中echo、print_r()和var_dump()怎么用 PHP中header()函数常用content-type的示例分析 PHP中常用的循环方法有哪些

【本文地址】

公司简介

联系我们