uni表单组件封装
展示效果
表单效果组件介绍组件说明
此组件为一个输入框,利用它可以快速实现表单验证,输入内容 基本使用Props
参数
说明
类型
默认值
可选值
label
标题
String
标题
-
type
输入内容的类型
String
text
text / number
code
表单字段 id ,用于配合 m-form-btn 提交数据使用
String
id
-
value
初始值,用于编辑页面绑定值
String , Number
-
-
placeholder
placeholder 显示值
String
请输入数据
-
required
是否必填
Boolean
false
false / true
rule
正则表达式,用于表单验证
String
-
-
errTip
错误提示
String
请输入正确的数据
- 组件说明
此组件为一个多行输入框,利用它可以快速实现表单验证,输入内容 基本使用Props
参数
说明
类型
默认值
可选值
label
标题
String
标题
-
code
表单字段 id ,用于配合 m-form-btn 提交数据使用
String
id
-
value
初始值
String ,用于编辑页面绑定值
-
-
placeholder
placeholder 显示值
String
请输入数据
-
required
是否必填
Boolean
false
false / true
maxlength
限制文本输入的最长字符串
Number
100
- 组件说明
此组件为一个单选框,数据在当前页面 基本使用 data() { return { Fruits:[{ id:1, label:"苹果" },{ id:2, label:"香蕉" }] } }, Props
参数
说明
类型
默认值
可选值
label
标题
String
标题
-
code
表单字段 id ,用于配合 m-form-btn 提交数据使用
String
id
-
value
list 数据对应的索引,-1代表不选中,用于编辑页面绑定值
Number
-1
-
list
带选择的数据列表,对象结构得满足{id:0,label:"名称"}
Array
[]
-
required
是否必填
Boolean
false
false / true 说明
当未选中任何值时,返回数据为null,否则返回数据对象{id:0,label:"名称"}。 组件说明
此组件为一个多选框,数据在当前页面 基本使用 data() { return { Fruits:[{ id:1, label:"苹果" },{ id:2, label:"香蕉" }], activeFruits:[] } }, Props
参数
说明
类型
默认值
可选值
label
标题
String
标题
-
code
表单字段 id ,用于配合 m-form-btn 提交数据使用
String
id
-
value
list 数据对应的id,初始值,用于编辑页面绑定值
Array
[]
-
list
带选择的数据列表,对象结构得满足{id:0,label:"名称"}
Array
[]
- 说明
当未选中任何值时,返回数据为[],否则返回数据对象[{id:0,label:"名称"}]。 组件说明
此组件为一个提交按钮,专为form表单设计使用 基本使用 tapSubmit(e){ if(!e.isRules){ this.$u.toast("请按要求录入数据") }else{ console.log(e.pageData) } } Props
参数
说明
类型
默认值
可选值
label
按钮显示文字
String
提交
- Events
事件名称
说明
回调参数
submit
提交表单
(e:{isRules,pageData}),isRules:数据是否验证通过;pageData:要提交的数据 使用例子