input下拉搜索（支持长列表虚拟滚动序列列表，本地或远程模糊与精确搜索）

更新记录

V2.0.0（2025-08-13）

新增了多选，修复搜索时下拉选项重叠错位的问题

平台兼容性

uni-app(4.07)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	√	√	√	√	-	-	-	-

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	快应用-华为	快应用-联盟
√	-	-	-	-	-	-	-	-	-	-

uni-app x(4.07)

Chrome	Safari	Android	iOS	鸿蒙	微信小程序
-	-	-	-	-	-

其他

多语言	暗黑模式	宽屏模式
×	×	√

README ‑ laybot-selects
支持单选、多选、本地搜索、虚拟滚动的下拉选择组件（uni-modules 版）

一、安装

HBuilderX 3.6+

打开“插件市场”→ 搜索“laybot-selects”→ 一键导入
（自动落到 uni_modules/laybot-selects/…）

npm / cli

# 在项目根目录
npm i laybot-selects-uniapp --save
# or
pnpm add laybot-selects-uniapp

安装后确保目录结构为

uni_modules/
└─ laybot-selects/
   └─ components/laybot-selects/laybot-selects.vue

二、快速上手

<template>
  <view class="demo">
    <!-- 单选（默认） -->
    <laybot-selects
      v-model="city"
      :list="cityList"
      placeholder="请选择城市" />

    <!-- 多选 + 本地过滤 -->
    <laybot-selects
      v-model="hobby"
      multiple
      enable-local-filter
      :list="hobbyList"
      placeholder="选择爱好"
      @confirm="handleConfirm" />
  </view>
</template>

<script setup>
import larrySelects from '@/uni_modules/laybot-selects/components/laybot-selects/laybot-selects.vue'

const city  = ref('')
const hobby = ref([])

const cityList = [
  { value: 'bj', label: '北京' },
  { value: 'sh', label: '上海' },
  // …
]

const hobbyList = [
  { value: 1, label: '篮球' },
  { value: 2, label: '跑步' },
  { value: 3, label: '旅游' },
]

const handleConfirm = list => {
  console.log('选择结果', list)
}
</script>

三、Props

参数	说明	类型 / 默认
modelValue / v-model	绑定的值（单选：字符串/数字，多选：数组）	—
list	选项数组	Array\<{ value,label,… }>
valueKey	value 字段名	String `'value'`
labelKey	label 字段名	String `'label'`
multiple	开启多选	Boolean `false`
showSearch	是否显示搜索框	Boolean `true`
enableLocalFilter	组件内部用 `includes` 做本地过滤	Boolean `false`
showSearchBtn	搜索按钮模式（自行触发 @search）	Boolean `false`
placeholder	输入框占位符	String
searchPlaceholder	搜索框占位符	String
selectColor	勾选时图标颜色	String `#0081ff`
disabled	禁用	Boolean
height	外部输入框高度，例如 `'38px'`	String
textAlign	外部输入框文字对齐 `'left'/'center'`	String

更多样式相关 prop 参见 component.json 注释。

四、Events

事件名	触发时机	回调参数
update:modelValue	选中 / 取消选中 / 重置 / 确认	新 value
change	单选时每次点击即关闭并触发	选中 item
confirm	多选点击“确定”	选中 item 数组
search	输入框内容变化 / 点击搜索按钮	关键词
openDeepScroll	弹窗打开	—
closeDeepScroll	弹窗关闭	—

五、Slots

暂无。所有可定制项均通过 props 样式或覆盖 CSS 变量实现。

六、样式定制

组件内部使用 SCSS 变量，可全局覆盖：

$primary : #0081ff;   // 选中主色
$text    : #333333;   // 文本色
$border  : #e6e6e6;   // 描边色

在项目 uni.scss / App.vue 顶部重新声明同名变量即可。

另外，可通过 inputStyle prop 精准传入外部输入框样式，
如 :input-style="{ background:'#fafafa',border:'1px solid #eee' }"。

七、API & 方法

组件无公开实例方法，所有交互通过 props 与事件完成。
若需主动清空，可在父组件直接修改 v-model 绑定值为 '' 或 []。

八、常见问题

Q1. 列表数据很多会卡吗？
A：内部使用虚拟滚动（仅渲染可视区），测试 5,000 条依旧流畅。

Q2. 如何实现远程搜索？
A：把 enable-local-filter 设为 false，监听 @search, 在回调里发请求 → 更新 list 即可。

Q3. v-model 需要数组还是字符串？
A：multiple=false → 字符串/数字；multiple → 数组。

九、更新日志

详见 uni_modules/laybot-selects/changelog.md

十、许可证