# ep-select

**Repository Path**: zerof_fei/ep-select

## Basic Information

- **Project Name**: ep-select
- **Description**: uni-app官方的picker组件不能禁用某个下拉项，所以就有了这个下拉组件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-07-24
- **Last Updated**: 2025-07-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ep-select

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

#### 2024-12-06更新：
1.使用强判定判断是否选中下拉项，区分空字符串和0

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

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

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

#### 参数列表
参数名称|类型|默认值|说明
---|:--:|:--:|:--:
value|String，Number|''|当前选中项，支持v-model
options|Array|[]|下拉选项列表，子元素为object，详见下方说明
value_key|String|value|重新指定待选项的value字段
label_key|String|label|重新指定待选项的label字段
filterable|Boolean|false|是否开启搜索下拉
keep-input|Boolean|false|是否缓存当前输入值
disabled|Boolean|false|是否禁用当前组件

### options子元素数据格式
参数名称|类型|默认值|说明
---|---|---|---
value|String|-|选中后，要同步给v-model的字段，可以使用上面的value_key重置
label|String|-|选中后，要展开的文本字段，可以使用上面的label_key重置
disabled|Boolean|-|是否禁用此选项
```
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>
```