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组件

参数列表

参数名称	类型	默认值	说明
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}
],

安装教程

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

组件调用

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

lianlizhou / ep-select

ep-select

介绍

2022-05-18更新：

2022-03-18更新：

2022-03-14更新：

参数列表

options子元素数据格式

安装教程

组件调用

JS代码

简介

发行版

贡献者

近期动态

lianlizhou / ep-select .gitee-modal { width: 500px !important; }

ep-select

介绍

2022-05-18更新：

2022-03-18更新：

2022-03-14更新：

参数列表

options子元素数据格式

安装教程

组件调用

JS代码

简介

发行版

贡献者

近期动态

搜索帮助

lianlizhou / ep-select