更新记录

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(搜索下拉时,是否保持输入框的值)

查看更多

平台兼容性

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

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}
],

安装教程

  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>

隐私、权限声明

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

未涉及任何系统权限

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

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

许可协议

MIT协议

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