更新记录

1.0.0（2025-09-18） 下载此版本

• v1.0.0: 初始版本发布
  • 支持单选/多选模式
  • 支持搜索功能
  • 支持数量输入
  • 支持默认值设置
  • 支持下拉加载更多

平台兼容性

yu-select 选择器组件

基于 UniApp 的弹出层选择器单选、多选组件，支持单选、多选、搜索、数量输入等功能。

功能特性

• ✅ 支持单选和复选模式
• ✅ 内置搜索功能，支持实时过滤
• ✅ 支持数量输入（可选）
• ✅ 支持默认值设置
• ✅ 支持下拉加载更多
• ✅ 全选/全不选功能
• ✅ 响应式设计，支持多端适配

安装使用

1. 将 uni_modules/yu-select 目录复制到您的 UniApp 项目的 uni_modules 目录下
2. 在页面中引入组件：

<template>
  <yu-select 
    :show="showSelect" 
    :dataLists="dataList" 
    @cancel="showSelect = false" 
    @submit="handleSelectSubmit"
  />
</template>

<script setup>
import { ref } from 'vue';

const showSelect = ref(false);
const dataList = ref([
  { label: '选项1', value: 1 },
  { label: '选项2', value: 2 },
  // ...
]);

function handleSelectSubmit(selectedData) {
  console.log('选中的数据:', selectedData);
}
</script>

Props 属性

Events 事件

使用示例

基本单选示例

<yu-select 
  :show="showSelect" 
  :dataLists="listData" 
  @cancel="showSelect = false" 
  @submit="handleSubmit"
/>

多选带数量示例

<yu-select 
  :show="showSelect" 
  :type="checkbox" 
  :showNum="true" 
  :dataLists="listData" 
  @cancel="showSelect = false" 
  @submit="handleSubmit"
/>

设置默认值

<yu-select 
  :show="showSelect" 
  :defaultValue="defaultSelected" 
  :dataLists="listData" 
  @cancel="showSelect = false" 
  @submit="handleSubmit"
/>

数据格式

组件期望的数据格式为对象数组，每个对象至少包含 label 和 value 字段：

const dataList = [
  { label: '选项1', value: 1, num: 0 },
  { label: '选项2', value: 2, num: 0 },
  // ...
];

返回值格式

单选模式

返回单个选中的对象：

{ label: '选项1', value: 1, num: 5 }

多选模式

返回选中的对象数组：

[
  { label: '选项1', value: 1, num: 5 },
  { label: '选项2', value: 2, num: 3 }
]

样式定制

组件使用 SCSS 编写样式，主要变量：

• $primary-color: 主题色 (#2B8BE4)
• $primary-light: 浅色背景 (#EBF5FD)
• $primary-text: 主要文字色 (#0076F9)

可以通过覆盖这些变量来自定义样式。

浏览器兼容性

• ✅ H5
• ✅ 微信小程序
• ✅ App
• ✅ 其他小程序平台

注意事项

1. 组件使用了 touchmove.stop.prevent 来防止弹窗内滚动影响外部页面
2. 数量输入框仅在 showNum="true" 时显示
3. 搜索功能默认开启，可通过 showSearch="false" 关闭
4. 组件会自动处理各端的样式差异

更新日志

• v1.0.0: 初始版本发布
  • 支持单选/多选模式
  • 支持搜索功能
  • 支持数量输入
  • 支持默认值设置
  • 支持下拉加载更多

作者

Yu