FE_preschoolEdu_miniProgram/uni_modules/hpy-form-select

hpy-form-select 下拉选择器 基于 picker 简单封装

**组件名：hpy-form-select

从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器

API

FilePicker Props

属性名	类型	默认值	说明
islot	Boolean | String	false	是否使用插槽
title	String	请选择	默认标题
mode	String	选择模式	selector | multiSelector
start	String		表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
end	String		表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
fields	String	day	有效值 year、month、day，表示选择器的粒度，默认为 day，App 端未配置此项时使用系统 UI
customItem	String		可为每一列的顶部添加一个自定义的项
dataList	Array		选择器数据
text	String		显示值的key
name	String		保存值的key
v-model | value	Array | Object		绑定的数据
disabled	Boolean | String	false	是否禁用
hideBorder	Boolean | String	false	是否隐藏边框
hideArrow	Boolean | String	false	是否隐藏箭头

使用示例

dataList 为对象数组时，name为实际保存的value值，text为显示的值

dataList 为对象数组[{name:'张三', age:'18'}, {name:'李四', age:'19'}]时，需要设置name、text属性，name为实际保存的value值，text为显示的值

<hpy-form-select :dataList="dataList" text="name" name="age" v-model="formData.age" @change="change" />

======================================================================================================

dataList 为普通数组['张三', '李四'] name、text可不设置

<hpy-form-select :dataList="dataList" v-model="formData.name" @change="change" />

类似：

text

	<hpy-form-select :dataList="hobbyList" text="text" name="value" v-model="formData.hobbySelect" @change="change" />
	 
	<uni-group title="基础信息" margin-top="0">
		<uni-forms-item label="姓名" name="name">
			<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
		</uni-forms-item>
		
		<uni-forms-item label="爱好2" name="hobby2">
			<hpy-form-select :dataList="hobbyList" text="text" name="value" v-model="formData.hobbySelect"/>
		</uni-forms-item>
		
		<uni-forms-item label="爱好3" name="hobby3">
			<hpy-form-select :dataList="hobbyList" text="text" name="value" v-model="formData.hobbySelect3" islot="true">
				<view class="my-select">可自定义显示</view>
			</hpy-form-select>
		</uni-forms-item>
		
		<uni-forms-item label="出生时间(年)" name="birthYear" >
			<hpy-form-select mode="date" fields="year" v-model="formData.birthYear" />
		</uni-forms-item>
	</uni-group>

export default {
		data() {
			return {
				formData:{
					hobbySelect:''
				},
				hobbyList: [{
					text: '足球',
					value: 1
				}, {
					text: '篮球',
					value: 2
				}, {
					text: '游泳',
					value: 3
				}],
			}
		},
		methods:{
			change(e){
				console.log(e.index);
				console.log(e.value);
				console.log(e.data);
			}
		}
}