更新记录

1.0.3(2024-09-25) 下载此版本

支持vue3版本bug修复

1.0.2(2024-09-25) 下载此版本

支持vue3

1.0.1(2024-09-25) 下载此版本

支持vue3,问题修复

查看更多

平台兼容性

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

插件介绍

1.支持单选多选

2.支持禁用(两种方式都可,参考配置项)

3.支持v-model双向绑定

4.支持vue2 vue3

5.支持配置弹窗位置(上下左右),背景色等等,具体查看配置项

6.搜索时支持忽略大小写搜索,多字段联合搜索

扫码查看组件示例

文档地址

文档地址

推荐下载使用 ex-ui

推荐下载使用 ex-ui

插件依赖uni-popup插件 请先通过插件市场安装依赖

属性

属性名 类型 默认值 可选值 说明
list Array 列表数据支持异步
title String 请选择 弹窗标题
isShowTitle Boolean true true,false 是否显示弹窗标题
confirmTextStyle String 'color:#409eff' 确认文字样式
showFilter Boolean true true,false 是否显示过滤输入框
filterKeys Array ['label'] 过滤的字段 key,默认为 label,可支持多个字段,以数组形式传递
props Object { label: 'label',value: 'value' } 配置项
type String bottom top,left,right,bottom 弹窗弹出位置(上下左右)
multiple Boolean false true,false 弹窗是否多选
maxNum Number Infinity 最大选中数量, 仅多选有效
maxNumToast String 超出最大选中数量 超出最大选中数量的提示信息
cancelSelectItem Boolean true true,false 已经选中的选项再次点击的时候能否取消选中,默认 true 为可以取消
disabledArr Array [] 禁用选项
width String '750rpx' 弹窗内容区宽度
height String '80vh' 弹窗内容区高度
isMaskClick Boolean true true,false 点击蒙版是否关闭弹窗
maskBackgroundColor String rgba(0,0,0,0.4) 蒙版背景颜色
backgroundColor String #ffffff 主窗口背景颜色
borderRadius String 10px 设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px"
searchDistinguishCapital boolean true true,false 搜索时不区分大小写
iconColor String #409eff 复选框颜色(仅ex-ui支持)

list配置项

属性名 类型 默认值 可选值 说明
label String,Number 显示的字段ke
value 绑定的key
disabled Boolean false 是否禁用选项true禁用

事件

事件名 说明
open 弹窗打开事件
close 弹窗取消事件
save 弹窗选中后确定事件第一参数为选中之后的value值,第二参数为整个数组
itemClick 选项点击事件两个参数,第一个参数为当前选项对象,第二个为索引

slot 插槽 可自定义内容

详情可查看示例

<hy-popup-select v-model="selectVal" list="list1"  ref="popupRef" @save="done">
    <template slot-scope="{item,index}">
        <view>
            {{item.label}} {{index}}
        </view>
    </template>
</hy-popup-select>

隐私、权限声明

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

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

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

许可协议

MIT协议

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