更新记录

1.2.00（2022-06-28） 下载此版本

2022-06-28更新：

修复微信小程序下v-model失效的问题

1.1.00（2022-05-24） 下载此版本

2022-05-24更新：

1.新增配置项size，可配置下拉框的大小 2.修复右侧下拉图标的样式定位问题

1.0.00（2022-05-17） 下载此版本

初次提交

平台兼容性

uni-app

ep-picker

介绍

基于官方的picker组件封装，支持v-model,自带默认的下拉框样式

2022-06-28更新：

1. 修复微信小程序下v-model失效的问题

2022-06-06更新：

1. 修复组件禁用时，下拉图标仍然可以切换的问题

2022-05-24更新：

1. 新增配置项size，可配置下拉框的大小
2. 修复右侧下拉图标的样式定位问题

为何封装此组件

1. 官方picker组件默认没有样式
2. picker组件本身接受纯字符串数组，而实际开发中，每个下拉项基本上都是2个字段（value和label），不便于对接后台接口
3. 支持v-model指令

参数列表

options子元素数据格式

options:[
    {value:"sh",label:"上海"},
    {value:"sz",label:"深圳"},
    {value:"gz",label:"广州"}
],

安装教程

1. 下载完毕后，将ep-picker文件夹放入uni-app项目下的components目录下
2. 插件的字体图标来源阿里巴巴图标库，已集成到插件中

组件调用

<template>
    <view class="content">
        <view style="display: flex;justify-content: center;padding:10px;align-items: center;">
            <view style="width:30%;text-align: right;">基本使用：</view>
            <view style="width:50%;">
                <ep-picker :options="options" v-model="city" @change="onChange"></ep-picker>
            </view>
        </view>
    </view>
</template>

JS代码

<script>
    export default {
        data() {
            return {
                city: "",
                options:[
                    {value:"sh",label:"上海"},{value:"sz",label:"深圳"},{value:"gz",label:"广州",disabled:true}
                ],
            }
        },
        methods: {
            onChange(){
                console.log(this.city)
            },
        }
    }
</script>