You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
355 lines
9.2 KiB
355 lines
9.2 KiB
<template> |
|
<view class="container"> |
|
<uni-card :is-shadow="false" is-full> |
|
<text class="uni-h6">uni-forms 组件一般由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。</text> |
|
</uni-card> |
|
<uni-section title="基本用法" type="line"> |
|
<view class="example"> |
|
<!-- 基础用法，不包含校验规则 --> |
|
<uni-forms ref="baseForm" :model="baseFormData" labelWidth="80px"> |
|
<uni-forms-item label="姓名" required> |
|
<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" /> |
|
</uni-forms-item> |
|
<uni-forms-item label="年龄" required> |
|
<uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄" /> |
|
</uni-forms-item> |
|
<uni-forms-item label="性别" required> |
|
<uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" /> |
|
</uni-forms-item> |
|
<uni-forms-item label="兴趣爱好" required> |
|
<uni-data-checkbox v-model="baseFormData.hobby" multiple :localdata="hobbys" /> |
|
</uni-forms-item> |
|
<uni-forms-item label="自我介绍"> |
|
<uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入自我介绍" /> |
|
</uni-forms-item> |
|
<uni-forms-item label="日期时间"> |
|
<uni-datetime-picker type="datetime" return-type="timestamp" |
|
v-model="baseFormData.datetimesingle" /> |
|
</uni-forms-item> |
|
<uni-forms-item label="选择城市"> |
|
<uni-data-picker v-model="baseFormData.city" :localdata="cityData" popup-title="选择城市"> |
|
</uni-data-picker> |
|
</uni-forms-item> |
|
|
|
<uni-forms-item label="选择技能"> |
|
<uni-data-select v-model="baseFormData.skills" :localdata="skillsRange" > |
|
</uni-data-select> |
|
</uni-forms-item> |
|
</uni-forms> |
|
</view> |
|
</uni-section> |
|
|
|
<uni-section title="对齐方式" type="line"> |
|
<view class="example"> |
|
<view class="segmented-control"> |
|
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" |
|
styleType="button"> |
|
</uni-segmented-control> |
|
</view> |
|
<!-- 展示不同的排列方式 --> |
|
<uni-forms ref="baseForm" :modelValue="alignmentFormData" :label-position="alignment"> |
|
<uni-forms-item label="姓名" required> |
|
<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" /> |
|
</uni-forms-item> |
|
<uni-forms-item label="年龄" required> |
|
<uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄" /> |
|
</uni-forms-item> |
|
</uni-forms> |
|
</view> |
|
</uni-section> |
|
|
|
<uni-section title="表单校验" type="line"> |
|
<view class="example"> |
|
<!-- 基础表单校验 --> |
|
<uni-forms ref="valiForm" :rules="rules" :model="valiFormData" labelWidth="80px"> |
|
<uni-forms-item label="姓名" required name="name"> |
|
<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" /> |
|
</uni-forms-item> |
|
<uni-forms-item label="年龄" required name="age"> |
|
<uni-easyinput v-model="valiFormData.age" placeholder="请输入年龄" /> |
|
</uni-forms-item> |
|
<uni-forms-item label="自我介绍"> |
|
<uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入自我介绍" /> |
|
</uni-forms-item> |
|
</uni-forms> |
|
<button type="primary" @click="submit('valiForm')">提交</button> |
|
</view> |
|
</uni-section> |
|
|
|
<uni-section title="自定义校验规则" type="line"> |
|
<view class="example"> |
|
<!-- 自定义表单校验 --> |
|
<uni-forms ref="customForm" :rules="customRules" labelWidth="80px" :modelValue="customFormData"> |
|
<uni-forms-item label="姓名" required name="name"> |
|
<uni-easyinput v-model="customFormData.name" placeholder="请输入姓名" /> |
|
</uni-forms-item> |
|
<uni-forms-item label="年龄" required name="age"> |
|
<uni-easyinput v-model="customFormData.age" placeholder="请输入年龄" /> |
|
</uni-forms-item> |
|
<uni-forms-item label="兴趣爱好" required name="hobby"> |
|
<uni-data-checkbox v-model="customFormData.hobby" multiple :localdata="hobbys" /> |
|
</uni-forms-item> |
|
</uni-forms> |
|
<button type="primary" @click="submit('customForm')">提交</button> |
|
</view> |
|
</uni-section> |
|
|
|
|
|
<uni-section title="动态表单" type="line"> |
|
<view class="example"> |
|
<!-- 动态表单校验 --> |
|
<uni-forms ref="dynamicForm" :rules="dynamicRules" :model="dynamicFormData" labelWidth="80px"> |
|
<uni-forms-item label="邮箱" required name="email"> |
|
<uni-easyinput v-model="dynamicFormData.email" placeholder="请输入姓名" /> |
|
</uni-forms-item> |
|
<uni-forms-item v-for="(item,index) in dynamicFormData.domains" :key="item.id" |
|
:label="item.label+' '+index" required :rules="item.rules" :name="['domains',index,'value']"> |
|
<view class="form-item"> |
|
<uni-easyinput v-model="dynamicFormData.domains[index].value" placeholder="请输入域名" /> |
|
<button class="button" size="mini" type="default" @click="del(item.id)">删除</button> |
|
</view> |
|
</uni-forms-item> |
|
</uni-forms> |
|
<view class="button-group"> |
|
<button type="primary" size="mini" @click="add">新增域名</button> |
|
<button type="primary" size="mini" @click="submit('dynamicForm')">提交</button> |
|
</view> |
|
</view> |
|
</uni-section> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
// 基础表单数据 |
|
baseFormData: { |
|
name: '', |
|
age: '', |
|
introduction: '', |
|
sex: 2, |
|
hobby: [5], |
|
datetimesingle: 1627529992399, |
|
city: '', |
|
skills: 0 |
|
}, |
|
// 城市数据 |
|
cityData: [{ |
|
text: "北京", |
|
value: "10001", |
|
}, { |
|
text: "上海", |
|
value: "10002", |
|
}, { |
|
text: "深圳", |
|
value: "10004", |
|
}], |
|
skillsRange: [{ |
|
value: 0, |
|
text: "编程" |
|
}, |
|
{ |
|
value: 1, |
|
text: "绘画" |
|
}, |
|
{ |
|
value: 2, |
|
text: "运动" |
|
}, |
|
], |
|
// 表单数据 |
|
alignmentFormData: { |
|
name: '', |
|
age: '', |
|
}, |
|
// 单选数据源 |
|
sexs: [{ |
|
text: '男', |
|
value: 0 |
|
}, { |
|
text: '女', |
|
value: 1 |
|
}, { |
|
text: '保密', |
|
value: 2 |
|
}], |
|
// 多选数据源 |
|
hobbys: [{ |
|
text: '跑步', |
|
value: 0 |
|
}, { |
|
text: '游泳', |
|
value: 1 |
|
}, { |
|
text: '绘画', |
|
value: 2 |
|
}, { |
|
text: '足球', |
|
value: 3 |
|
}, { |
|
text: '篮球', |
|
value: 4 |
|
}, { |
|
text: '其他', |
|
value: 5 |
|
}], |
|
// 分段器数据 |
|
current: 0, |
|
items: ['左对齐', '顶部对齐'], |
|
// 校验表单数据 |
|
valiFormData: { |
|
name: '', |
|
age: '', |
|
introduction: '', |
|
}, |
|
// 校验规则 |
|
rules: { |
|
name: { |
|
rules: [{ |
|
required: true, |
|
errorMessage: '姓名不能为空' |
|
}] |
|
}, |
|
age: { |
|
rules: [{ |
|
required: true, |
|
errorMessage: '年龄不能为空' |
|
}, { |
|
format: 'number', |
|
errorMessage: '年龄只能输入数字' |
|
}] |
|
} |
|
}, |
|
// 自定义表单数据 |
|
customFormData: { |
|
name: '', |
|
age: '', |
|
hobby: [] |
|
}, |
|
// 自定义表单校验规则 |
|
customRules: { |
|
name: { |
|
rules: [{ |
|
required: true, |
|
errorMessage: '姓名不能为空' |
|
}] |
|
}, |
|
age: { |
|
rules: [{ |
|
required: true, |
|
errorMessage: '年龄不能为空' |
|
}] |
|
}, |
|
hobby: { |
|
rules: [{ |
|
format: 'array' |
|
}, |
|
{ |
|
validateFunction: function(rule, value, data, callback) { |
|
if (value.length < 2) { |
|
callback('请至少勾选两个兴趣爱好') |
|
} |
|
return true |
|
} |
|
} |
|
] |
|
} |
|
|
|
}, |
|
dynamicFormData: { |
|
email: '', |
|
domains: [] |
|
}, |
|
dynamicLists: [], |
|
dynamicRules: { |
|
email: { |
|
rules: [{ |
|
required: true, |
|
errorMessage: '域名不能为空' |
|
}, { |
|
format: 'email', |
|
errorMessage: '域名格式错误' |
|
}] |
|
} |
|
} |
|
} |
|
}, |
|
computed: { |
|
// 处理表单排列切换 |
|
alignment() { |
|
if (this.current === 0) return 'left' |
|
if (this.current === 1) return 'top' |
|
return 'left' |
|
} |
|
}, |
|
onLoad() {}, |
|
onReady() { |
|
// 设置自定义表单校验规则，必须在节点渲染完毕后执行 |
|
this.$refs.customForm.setRules(this.customRules) |
|
}, |
|
methods: { |
|
onClickItem(e) { |
|
console.log(e); |
|
this.current = e.currentIndex |
|
}, |
|
add() { |
|
this.dynamicFormData.domains.push({ |
|
label: '域名', |
|
value: '', |
|
rules: [{ |
|
'required': true, |
|
errorMessage: '域名项必填' |
|
}], |
|
id: Date.now() |
|
}) |
|
}, |
|
del(id) { |
|
let index = this.dynamicLists.findIndex(v => v.id === id) |
|
this.dynamicLists.splice(index, 1) |
|
}, |
|
submit(ref) { |
|
console.log(this.baseFormData); |
|
this.$refs[ref].validate().then(res => { |
|
console.log('success', res); |
|
uni.showToast({ |
|
title: `校验通过` |
|
}) |
|
}).catch(err => { |
|
console.log('err', err); |
|
}) |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.example { |
|
padding: 15px; |
|
background-color: #fff; |
|
} |
|
|
|
.segmented-control { |
|
margin-bottom: 15px; |
|
} |
|
|
|
.button-group { |
|
margin-top: 15px; |
|
display: flex; |
|
justify-content: space-around; |
|
} |
|
|
|
.form-item { |
|
display: flex; |
|
align-items: center; |
|
flex: 1; |
|
} |
|
|
|
.button { |
|
display: flex; |
|
align-items: center; |
|
height: 35px; |
|
line-height: 35px; |
|
margin-left: 10px; |
|
} |
|
</style>
|
|
|