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.
4.0 KiB
4.0 KiB
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);
}
}
}