前言推荐一个写博客的效率工具 CSDN AI数字营销会员核心功能✅ 多平台一键同步 → 一次发文同步6个平台✅ 全维度数据监测 → 所有平台数据一个面板看✅ 营销组件 → 文末合规放公众号/产品推广✅ GEO检测 → 看你文章在AI平台的曝光情况对我这种多平台发文的人来说光同步功能就值回票价了。写博客的朋友可以看看https://mp.csdn.net/vip?utm_sourcefx-blog-qq_45954390————————————————在移动端业务开发中表单页面是非常高频的场景比如申请发票、个人信息、联系人资料、入住人信息、订单补充信息等。这类页面看起来并不复杂但实际开发时经常会遇到几个重复问题每个页面都要重新写表单卡片、标题、字段行、底部按钮普通uni-app和uni-app x的组件写法、样式兼容存在差异uni-app x / uvue对部分 CSS 写法限制更严格很多 Web 习惯写法不能直接用表单提交时需要统一处理必填校验、提交结果、重置逻辑因此我写了两个表单插件una-form适用于普通uni-app Vue3项目una-app-form适用于uni-app x / uvue项目一、插件介绍1.una-form 是什么una-form是一个基于uni-app Vue3的轻量表单组件。它采用schema配置方式渲染表单字段适合快速搭建常见业务表单例如申请发票表单个人信息表单联系人信息表单入住人资料表单订单补充信息表单组件内置常见字段类型、必填校验、提交和重置按钮适合普通uni-app项目直接使用。2.una-app-form 是什么una-app-form是一个基于uni-app x / uvue的轻量表单容器组件。由于uni-app x / uvue在多端编译时对动态对象、CSS 写法、部分 Web 样式能力要求更严格所以una-app-form没有采用复杂的动态 schema 渲染而是采用更稳妥的插槽方式插件负责统一表单卡片、标题、副标题、底部按钮、主题色业务页面自己在插槽中编写具体字段更适合 App Android、iOS、鸿蒙端稳定编译3. 两个插件的区别插件适用项目实现方式适合场景una-form普通 uni-app Vue3schema 配置式表单快速生成字段较固定的表单una-app-formuni-app x / uvue插槽式表单容器App 端稳定表单布局简单理解如果你的项目是普通uni-app Vue3优先使用una-form如果你的项目是uni-app x / uvue优先使用una-app-form4. 功能特性una-form特性支持text、number、textarea、select、radio、tags支持schema配置式渲染支持必填校验提交时返回valid / values / errors支持自定义主题色支持标题、副标题、提交按钮、重置按钮适合普通uni-app Vue3una-app-form特性支持uni-app x / uvue支持 Android、iOS、鸿蒙 App支持表单卡片、标题、副标题、底部按钮支持自定义主题色、背景色、圆角使用默认插槽承载业务字段避免复杂动态 schema 导致 uvue 编译不稳定样式使用px单位减少 App 端 CSS 兼容问题二、una-form 使用说明1. 插件目录将插件放入项目的uni_modules目录uni_modules/una-form组件文件目录uni_modules/una-form/components/una-form/una-form.vue如果 HBuilderX 没有自动识别组件可以检查目录名称是否一致。2. 申请发票表单示例templateuna-formv-modelinvoiceFormtitle申请发票subtitle填写发票抬头、税号和接收邮箱:schemainvoiceSchemathemeColor#2979ffsubmitText提交申请submithandleInvoiceSubmit//templatescriptsetupimport{ref}fromvue;constinvoiceFormref({invoiceType:company,title:,taxNo:,email:,amount:,remark:});constinvoiceSchema[{key:invoiceType,label:发票类型,type:radio,required:true,options:[{label:企业,value:company},{label:个人,value:personal}]},{key:title,label:发票抬头,type:text,required:true,placeholder:请输入发票抬头},{key:taxNo,label:纳税人识别号,type:text,required:true,placeholder:请输入税号},{key:email,label:接收邮箱,type:text,required:true,placeholder:请输入邮箱地址},{key:amount,label:发票金额,type:number,placeholder:请输入金额},{key:remark,label:备注,type:textarea,placeholder:可填写开票说明}];functionhandleInvoiceSubmit(event){if(!event.valid)return;console.log(发票表单提交,event.values);}/script3. 个人信息表单示例templateuna-formv-modelprofileFormtitle个人信息subtitle用于演示常见资料字段填写:schemaprofileSchemathemeColor#10b981submitText保存信息submithandleProfileSubmit//templatescriptsetupimport{ref}fromvue;constprofileFormref({name:,phone:,gender:female,identity:,address:});constprofileSchema[{key:name,label:姓名,type:text,required:true,placeholder:请输入姓名},{key:phone,label:手机号,type:number,required:true,placeholder:请输入手机号},{key:gender,label:性别,type:tags,options:[{label:女士,value:female},{label:男士,value:male},{label:保密,value:unknown}]},{key:identity,label:证件号,type:text,placeholder:请输入证件号码},{key:address,label:联系地址,type:textarea,placeholder:请输入常用联系地址}];functionhandleProfileSubmit(event){if(!event.valid)return;console.log(个人信息提交,event.values);}/script4. Props 参数参数说明类型默认值v-model表单数据对象Object{}schema表单字段配置Array[]title表单标题Stringsubtitle表单副标题StringthemeColor主题色String#2979ffbackgroundColor表单背景色String#ffffffdisabled是否禁用表单BooleanfalseshowActions是否显示底部按钮BooleantrueshowReset是否显示重置按钮BooleantruesubmitText提交按钮文案String提交resetText重置按钮文案String重置5. Events 事件事件名说明返回值change单个字段变更时触发{ key, value, values }submit点击提交时触发{ valid, values, errors }reset点击重置时触发重置后的表单对象6. Schema 字段配置字段说明key字段名对应v-model对象中的属性label表单项标题type字段类型支持text、number、textarea、select、radio、tagsplaceholder输入占位提示required是否必填message必填校验失败提示optionsselect、radio、tags的选项数组defaultValue点击重置时使用的默认值disabled是否禁用单个字段options示例[{label:企业,value:company},{label:个人,value:personal}]三、una-app-form 使用说明1. 插件目录将插件放入项目的uni_modules目录uni_modules/una-app-form组件文件目录uni_modules/una-app-form/components/una-app-form/una-app-form.uvue2. 申请发票表单示例templateuna-app-formtitle申请发票subtitle填写发票信息和接收邮箱themeColor#2979FFsubmitText提交申请submitsubmitInvoiceresetresetInvoiceviewclassform-fieldtextclassform-field__label发票抬头/textinputclassform-field__input:valueinvoiceTitleplaceholder请输入发票抬头inputonInvoiceTitleInput//viewviewclassform-fieldtextclassform-field__label税号/textinputclassform-field__input:valueinvoiceTaxNoplaceholder请输入纳税人识别号inputonInvoiceTaxNoInput//view/una-app-form/templatescriptsetuplangutsconstinvoiceTitlerefstring()constinvoiceTaxNorefstring()functiononInvoiceTitleInput(event:UniInputEvent){invoiceTitle.valueevent.detail.value}functiononInvoiceTaxNoInput(event:UniInputEvent){invoiceTaxNo.valueevent.detail.value}functionsubmitInvoice(){if(invoiceTitle.value.length0){uni.showToast({title:请填写发票抬头,icon:none})return}if(invoiceTaxNo.value.length0){uni.showToast({title:请填写税号,icon:none})return}console.log(提交发票信息)}functionresetInvoice(){invoiceTitle.valueinvoiceTaxNo.value}/script3. 个人信息表单示例templateuna-app-formtitle个人信息subtitle用于演示常见资料字段填写themeColor#10B981submitText保存信息submitsubmitProfileresetresetProfileviewclassform-fieldtextclassform-field__label姓名/textinputclassform-field__input:valueprofileNameplaceholder请输入姓名inputonProfileNameInput//viewviewclassform-fieldtextclassform-field__label手机号/textinputclassform-field__inputtypenumber:valueprofilePhoneplaceholder请输入手机号inputonProfilePhoneInput//view/una-app-form/templatescriptsetuplangutsconstprofileNamerefstring()constprofilePhonerefstring()functiononProfileNameInput(event:UniInputEvent){profileName.valueevent.detail.value}functiononProfilePhoneInput(event:UniInputEvent){profilePhone.valueevent.detail.value}functionsubmitProfile(){if(profileName.value.length0){uni.showToast({title:请填写姓名,icon:none})return}if(profilePhone.value.length0){uni.showToast({title:请填写手机号,icon:none})return}console.log(提交个人信息)}functionresetProfile(){profileName.valueprofilePhone.value}/script4. Props 参数参数说明类型默认值title表单标题Stringsubtitle表单副标题StringthemeColor主题色String#2979ffbackgroundColor表单背景色String#FFFFFFradius表单圆角String12pxshowActions是否显示底部按钮BooleantrueshowReset是否显示重置按钮BooleantruesubmitText提交按钮文案String提交resetText重置按钮文案String重置5. Events 事件事件名说明submit点击提交按钮触发reset点击重置按钮触发五. 表单校验建议放在提交时统一处理对于复杂业务表单建议在提交时统一校验。例如functionhandleSubmit(event){if(!event.valid)return;// 调用接口}uni-app x中也可以在submit方法里自行判断字段function submitProfile() { if (profileName.value.length 0) { uni.showToast({ title: 请填写姓名, icon: none }) return } }
前言推荐一个写博客的效率工具 CSDN AI数字营销会员核心功能✅ 多平台一键同步 → 一次发文同步6个平台✅ 全维度数据监测 → 所有平台数据一个面板看✅ 营销组件 → 文末合规放公众号/产品推广✅ GEO检测 → 看你文章在AI平台的曝光情况对我这种多平台发文的人来说光同步功能就值回票价了。写博客的朋友可以看看https://mp.csdn.net/vip?utm_sourcefx-blog-qq_45954390————————————————在移动端业务开发中表单页面是非常高频的场景比如申请发票、个人信息、联系人资料、入住人信息、订单补充信息等。这类页面看起来并不复杂但实际开发时经常会遇到几个重复问题每个页面都要重新写表单卡片、标题、字段行、底部按钮普通uni-app和uni-app x的组件写法、样式兼容存在差异uni-app x / uvue对部分 CSS 写法限制更严格很多 Web 习惯写法不能直接用表单提交时需要统一处理必填校验、提交结果、重置逻辑因此我写了两个表单插件una-form适用于普通uni-app Vue3项目una-app-form适用于uni-app x / uvue项目一、插件介绍1.una-form 是什么una-form是一个基于uni-app Vue3的轻量表单组件。它采用schema配置方式渲染表单字段适合快速搭建常见业务表单例如申请发票表单个人信息表单联系人信息表单入住人资料表单订单补充信息表单组件内置常见字段类型、必填校验、提交和重置按钮适合普通uni-app项目直接使用。2.una-app-form 是什么una-app-form是一个基于uni-app x / uvue的轻量表单容器组件。由于uni-app x / uvue在多端编译时对动态对象、CSS 写法、部分 Web 样式能力要求更严格所以una-app-form没有采用复杂的动态 schema 渲染而是采用更稳妥的插槽方式插件负责统一表单卡片、标题、副标题、底部按钮、主题色业务页面自己在插槽中编写具体字段更适合 App Android、iOS、鸿蒙端稳定编译3. 两个插件的区别插件适用项目实现方式适合场景una-form普通 uni-app Vue3schema 配置式表单快速生成字段较固定的表单una-app-formuni-app x / uvue插槽式表单容器App 端稳定表单布局简单理解如果你的项目是普通uni-app Vue3优先使用una-form如果你的项目是uni-app x / uvue优先使用una-app-form4. 功能特性una-form特性支持text、number、textarea、select、radio、tags支持schema配置式渲染支持必填校验提交时返回valid / values / errors支持自定义主题色支持标题、副标题、提交按钮、重置按钮适合普通uni-app Vue3una-app-form特性支持uni-app x / uvue支持 Android、iOS、鸿蒙 App支持表单卡片、标题、副标题、底部按钮支持自定义主题色、背景色、圆角使用默认插槽承载业务字段避免复杂动态 schema 导致 uvue 编译不稳定样式使用px单位减少 App 端 CSS 兼容问题二、una-form 使用说明1. 插件目录将插件放入项目的uni_modules目录uni_modules/una-form组件文件目录uni_modules/una-form/components/una-form/una-form.vue如果 HBuilderX 没有自动识别组件可以检查目录名称是否一致。2. 申请发票表单示例templateuna-formv-modelinvoiceFormtitle申请发票subtitle填写发票抬头、税号和接收邮箱:schemainvoiceSchemathemeColor#2979ffsubmitText提交申请submithandleInvoiceSubmit//templatescriptsetupimport{ref}fromvue;constinvoiceFormref({invoiceType:company,title:,taxNo:,email:,amount:,remark:});constinvoiceSchema[{key:invoiceType,label:发票类型,type:radio,required:true,options:[{label:企业,value:company},{label:个人,value:personal}]},{key:title,label:发票抬头,type:text,required:true,placeholder:请输入发票抬头},{key:taxNo,label:纳税人识别号,type:text,required:true,placeholder:请输入税号},{key:email,label:接收邮箱,type:text,required:true,placeholder:请输入邮箱地址},{key:amount,label:发票金额,type:number,placeholder:请输入金额},{key:remark,label:备注,type:textarea,placeholder:可填写开票说明}];functionhandleInvoiceSubmit(event){if(!event.valid)return;console.log(发票表单提交,event.values);}/script3. 个人信息表单示例templateuna-formv-modelprofileFormtitle个人信息subtitle用于演示常见资料字段填写:schemaprofileSchemathemeColor#10b981submitText保存信息submithandleProfileSubmit//templatescriptsetupimport{ref}fromvue;constprofileFormref({name:,phone:,gender:female,identity:,address:});constprofileSchema[{key:name,label:姓名,type:text,required:true,placeholder:请输入姓名},{key:phone,label:手机号,type:number,required:true,placeholder:请输入手机号},{key:gender,label:性别,type:tags,options:[{label:女士,value:female},{label:男士,value:male},{label:保密,value:unknown}]},{key:identity,label:证件号,type:text,placeholder:请输入证件号码},{key:address,label:联系地址,type:textarea,placeholder:请输入常用联系地址}];functionhandleProfileSubmit(event){if(!event.valid)return;console.log(个人信息提交,event.values);}/script4. Props 参数参数说明类型默认值v-model表单数据对象Object{}schema表单字段配置Array[]title表单标题Stringsubtitle表单副标题StringthemeColor主题色String#2979ffbackgroundColor表单背景色String#ffffffdisabled是否禁用表单BooleanfalseshowActions是否显示底部按钮BooleantrueshowReset是否显示重置按钮BooleantruesubmitText提交按钮文案String提交resetText重置按钮文案String重置5. Events 事件事件名说明返回值change单个字段变更时触发{ key, value, values }submit点击提交时触发{ valid, values, errors }reset点击重置时触发重置后的表单对象6. Schema 字段配置字段说明key字段名对应v-model对象中的属性label表单项标题type字段类型支持text、number、textarea、select、radio、tagsplaceholder输入占位提示required是否必填message必填校验失败提示optionsselect、radio、tags的选项数组defaultValue点击重置时使用的默认值disabled是否禁用单个字段options示例[{label:企业,value:company},{label:个人,value:personal}]三、una-app-form 使用说明1. 插件目录将插件放入项目的uni_modules目录uni_modules/una-app-form组件文件目录uni_modules/una-app-form/components/una-app-form/una-app-form.uvue2. 申请发票表单示例templateuna-app-formtitle申请发票subtitle填写发票信息和接收邮箱themeColor#2979FFsubmitText提交申请submitsubmitInvoiceresetresetInvoiceviewclassform-fieldtextclassform-field__label发票抬头/textinputclassform-field__input:valueinvoiceTitleplaceholder请输入发票抬头inputonInvoiceTitleInput//viewviewclassform-fieldtextclassform-field__label税号/textinputclassform-field__input:valueinvoiceTaxNoplaceholder请输入纳税人识别号inputonInvoiceTaxNoInput//view/una-app-form/templatescriptsetuplangutsconstinvoiceTitlerefstring()constinvoiceTaxNorefstring()functiononInvoiceTitleInput(event:UniInputEvent){invoiceTitle.valueevent.detail.value}functiononInvoiceTaxNoInput(event:UniInputEvent){invoiceTaxNo.valueevent.detail.value}functionsubmitInvoice(){if(invoiceTitle.value.length0){uni.showToast({title:请填写发票抬头,icon:none})return}if(invoiceTaxNo.value.length0){uni.showToast({title:请填写税号,icon:none})return}console.log(提交发票信息)}functionresetInvoice(){invoiceTitle.valueinvoiceTaxNo.value}/script3. 个人信息表单示例templateuna-app-formtitle个人信息subtitle用于演示常见资料字段填写themeColor#10B981submitText保存信息submitsubmitProfileresetresetProfileviewclassform-fieldtextclassform-field__label姓名/textinputclassform-field__input:valueprofileNameplaceholder请输入姓名inputonProfileNameInput//viewviewclassform-fieldtextclassform-field__label手机号/textinputclassform-field__inputtypenumber:valueprofilePhoneplaceholder请输入手机号inputonProfilePhoneInput//view/una-app-form/templatescriptsetuplangutsconstprofileNamerefstring()constprofilePhonerefstring()functiononProfileNameInput(event:UniInputEvent){profileName.valueevent.detail.value}functiononProfilePhoneInput(event:UniInputEvent){profilePhone.valueevent.detail.value}functionsubmitProfile(){if(profileName.value.length0){uni.showToast({title:请填写姓名,icon:none})return}if(profilePhone.value.length0){uni.showToast({title:请填写手机号,icon:none})return}console.log(提交个人信息)}functionresetProfile(){profileName.valueprofilePhone.value}/script4. Props 参数参数说明类型默认值title表单标题Stringsubtitle表单副标题StringthemeColor主题色String#2979ffbackgroundColor表单背景色String#FFFFFFradius表单圆角String12pxshowActions是否显示底部按钮BooleantrueshowReset是否显示重置按钮BooleantruesubmitText提交按钮文案String提交resetText重置按钮文案String重置5. Events 事件事件名说明submit点击提交按钮触发reset点击重置按钮触发五. 表单校验建议放在提交时统一处理对于复杂业务表单建议在提交时统一校验。例如functionhandleSubmit(event){if(!event.valid)return;// 调用接口}uni-app x中也可以在submit方法里自行判断字段function submitProfile() { if (profileName.value.length 0) { uni.showToast({ title: 请填写姓名, icon: none }) return } }
