更新记录

0.0.5(2021-10-14)

  • 示例错误修正,v-model无效的原因:
  • 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" />

0.0.4(2021-08-01)

  • 增加禁用,修复列表数据异步回显问题
查看更多

平台兼容性

Vue2 Vue3
×
App 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 快应用
app-vue app-nvue ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

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

**组件名:hpy-form-select

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

API

FilePicker Props

| 属性名 | 类型 | 默认值 | 可选值 | 说明 | | v-model/value | Array\Object | - | - | 绑定的数据 | dataList | Array / Array<Object> - | 选择器数据 | | title | String | 默认标题:请选择 | | text | String | 显示值的key | | name | String | 保存值的key
| disabled | Boolean | 是否禁用

使用示例

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" />

类似:

<select>

</select>

    <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="出生时间(年)" 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: 0
                }, {
                    text: '篮球',
                    value: 1
                }, {
                    text: '游泳',
                    value: 2
                }],
            }
        },
        methods:{
            change(data){
                console.log(data.index);
                console.log(data.value);
            }
        }
}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问