更新记录

1.400（2023-06-12）

2023-06-12更新： v-model指令兼容小程序

1.300（2022-05-17）

2022-05-18更新：

1.修正下拉的点击范围，现在右侧箭头图标也能弹出下拉选项 2.样式修正，修复字体抖动问题，默认宽度设定为100%

1.200（2022-03-18）

2022-03-18更新： 1.新增配置项：keep-input（搜索下拉时，是否保持输入框的值）

平台兼容性

ep-select

介绍

uni-app官方的picker组件不能禁用某个下拉项，所以就有了这个下拉组件

2022-05-18更新：

1.修正下拉的点击范围，现在右侧箭头图标也能弹出下拉选项 2.样式修正，修复字体抖动问题，默认宽度设定为100%

2022-03-18更新：

1.新增配置项：keep-input（搜索下拉时，是否保持输入框的值）

2022-03-14更新：

1.新增配置项：filterable（支持搜索下拉） 2.输入框依赖uni-easyinput组件

参数列表

options子元素数据格式

options:[
    {value:"1",label:"上海"},
    {value:"2",label:"深圳"},
    {value:"3",label:"广州",disabled:true}
],

安装教程

1. 下载完毕后，将ep-select文件夹放入uni-app项目下的components目录下
2. 此插件依赖uni-easyinput组件，请确保项目中已引入此组件
3. 插件的字体图标来源阿里巴巴图标库，已下载集成到项目中

组件调用

<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-select v-model="select" :options="options" @change="change"></ep-select>
            </view>
        </view>

        <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-select v-model="select2" :options="options" @change="change" :disabled="true"></ep-select>
            </view>
        </view>

        <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-select filterable v-model="select3" :options="options" @change="change"></ep-select>
            </view>
        </view>

        <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-select filterable keep-input v-model="select4" :options="options" @change="change"></ep-select>
            </view>
        </view>
    </view>
</template>

JS代码

<script>
    export default {
        data() {
            return {
                select: '',
                select2: '',
                select3: '',
                select4: '',
                options:[
                    {value:"1",label:"上海"},{value:"2",label:"深圳"},{value:"3",label:"广州",disabled:true}
                ],
            }
        },
        onLoad() {

        },
        methods: {
            change(e){
                console.log('select = ',this.select)
            },
        }
    }
</script>