展示效果
表单效果
组件介绍
组件说明
此组件为一个输入框，利用它可以快速实现表单验证，输入内容
基本使用
<m-form-input label="邮箱" code="Email" rule="^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$" errTip="请输入正确的邮箱地址" />
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 |
请输入正确的数据 | - |
组件说明
此组件为一个多行输入框，利用它可以快速实现表单验证，输入内容
基本使用
<m-form-textarea label="备注(必填)" code="Remark0" required placeholder="请填写备注" />
Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
label |
标题 | String |
标题 | - |
code |
表单字段 id，用于配合 m-form-btn 提交数据使用 |
String |
id |
- |
value |
初始值 |
String，用于编辑页面绑定值 |
- | - |
placeholder |
placeholder显示值 |
String |
请输入数据 | - |
required |
是否必填 | Boolean |
false |
false / true
|
maxlength |
限制文本输入的最长字符串 | Number |
100 | - |
组件说明
此组件为一个单选框，数据在当前页面
基本使用
<m-form-radio label="水果" code="Fruit" :list="Fruits" />
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:'名称'}。
组件说明
此组件为一个多选框，数据在当前页面
基本使用
<m-form-checkbox label="水果(多选)" code="Fruits" :value="activeFruits" :list="Fruits" />
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表单设计使用
基本使用
<m-form-btn @submit="tapSubmit" />
tapSubmit(e){
if(!e.isRules){
this.$u.toast('请按要求录入数据')
}else{
console.log(e.pageData)
}
}
Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
label |
按钮显示文字 | String |
提交 | - |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| submit | 提交表单 | (e:{isRules,pageData}),isRules:数据是否验证通过;pageData:要提交的数据 |
使用例子
<template>
<view class="page">
<m-form-input label="手机号" required type="number" code="Phone" rule="^1[0-9]{10,10}$" placeholder="请输入手机号" errTip="请输入正确的手机号"/>
<m-form-input label="邮箱" code="Email" rule="^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$" errTip="请输入正确的邮箱地址" />
<m-form-textarea label="备注(必填)" code="Remark0" required placeholder="请填写备注" />
<m-form-textarea label="备注(选填)" code="Remark1" placeholder="请填写备注" :maxlength="200" />
<m-form-radio label="水果(单选)" required code="Fruit" :value="0" :list="Fruits" />
<m-form-checkbox label="水果(多选)" code="Fruits" :value="activeFruits" :list="Fruits" />
<m-form-btn @submit="tapSubmit" />
</view>
</template>
<script>
export default {
data() {
return {
Fruits:[{
id:1,
label:'苹果'
},{
id:2,
label:'香蕉'
},{
id:3,
label:'梨'
},{
id:4,
label:'柚子'
},{
id:5,
label:'橘子'
},{
id:6,
label:'猕猴桃'
},{
id:7,
label:'哈密瓜'
},{
id:8,
label:'西瓜'
}],
activeFruits:[]
}
},
onLoad() {
},
onUnload() {
//页面卸载，清空页面填写的值
this.$_clearPageData();
},
methods: {
tapSubmit(e){
console.log(e.pageData)
if(!e.isRules){
this.$u.toast('请按要求录入数据')
}else{
console.log(e.pageData)
}
}
}
}
</script>
<style scoped>
</style>
网友评论