更新记录

1.0.0（2025-12-26） 下载此版本

功能

平台兼容性

uni-app(4.83)

multi-picker 多选下拉选择器

组件名：multi-picker 版本：v1.0.0

multi-picker 是一个功能强大的多选下拉选择器组件，支持单选/多选、搜索过滤、智能定位、自定义样式等功能。

快速开始

安装

在 HBuilderX 中，点击右上角的 使用 HBuilderX 导入插件 按钮，或者下载插件 ZIP 包解压到项目的 uni_modules/multi-picker 目录下。

使用

由于使用了 uni_modules 方式，组件会自动注册，无需手动引入，可以直接在页面中使用：

<template>
  <view>
    <multi-picker
      v-model="selectedValue"
      :list="options"
      placeholder="请选择"
      @change="handleChange"
    />
  </view>
</template>

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

const selectedValue = ref('');
const options = ref([
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' }
]);

const handleChange = (item) => {
  console.log('选中项:', item);
};
</script>

功能特性

• ✅ 单选/多选 - 支持单选和多选两种模式
• ✅ 搜索过滤 - 支持输入搜索过滤选项
• ✅ 智能定位 - 自动判断下拉方向（向上/向下）
• ✅ 自定义样式 - 支持自定义宽高、颜色等样式
• ✅ 清空功能 - 可选显示清空按钮
• ✅ 禁用状态 - 支持禁用选择器
• ✅ 灵活配置 - 可自定义字段名称
• ✅ 跨平台兼容 - 完美兼容 H5 和微信小程序
• ✅ VUE2/VUE3 - 同时支持 Vue2 和 Vue3

平台兼容性

Props

Events

使用示例

单选模式

<template>
  <multi-picker
    v-model="selectedValue"
    :list="options"
    placeholder="请选择"
    @change="handleChange"
  />
</template>

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

const selectedValue = ref('');
const options = ref([
  { label: '北京', value: 'beijing' },
  { label: '上海', value: 'shanghai' },
  { label: '广州', value: 'guangzhou' }
]);

const handleChange = (item) => {
  console.log('选中:', item);
};
</script>

多选模式

<template>
  <multi-picker
    v-model="selectedValues"
    :list="options"
    :multiple="true"
    placeholder="请选择多个"
    @change="handleChange"
  />
</template>

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

const selectedValues = ref([]);
const options = ref([
  { label: '苹果', value: 'apple' },
  { label: '香蕉', value: 'banana' },
  { label: '橙子', value: 'orange' }
]);

const handleChange = (item) => {
  console.log('当前选中项:', item);
  console.log('所有选中:', selectedValues.value);
};
</script>

搜索过滤

<multi-picker
  v-model="selectedValue"
  :list="options"
  :filterable="true"
  placeholder="输入搜索"
/>

自定义样式

<multi-picker
  v-model="selectedValue"
  :list="options"
  width="300px"
  height="40px"
  bgColor="#f5f5f5"
  textColor="#333"
  activeColor="#ff6600"
/>

显示清空按钮

<multi-picker
  v-model="selectedValue"
  :list="options"
  :showClose="true"
/>

自定义字段名

<script setup>
const options = ref([
  { name: '选项1', id: '1' },
  { name: '选项2', id: '2' }
]);
</script>

<template>
  <multi-picker
    v-model="selectedValue"
    :list="options"
    valueName="name"
    keyName="id"
  />
</template>

数据格式

list 数组格式：

[
  {
    label: '显示文本',  // 或使用 valueName 指定的字段
    value: '绑定值'     // 或使用 keyName 指定的字段
  }
]

注意事项

1. 字段配置 - 默认使用 label 和 value 字段，可通过 valueName 和 keyName 自定义
2. 多选模式 - 多选时 modelValue 必须为数组类型
3. 搜索功能 - 搜索基于 valueName 字段进行模糊匹配
4. 智能定位 - 组件会自动判断下拉方向，避免超出屏幕

更新日志

v1.0.0 (2025-01-26)

• 🎉 初始版本发布
• ✅ 支持单选/多选模式
• ✅ 支持搜索过滤
• ✅ 支持智能定位
• ✅ 支持自定义样式
• ✅ 完美兼容 H5 和微信小程序
• ✅ 同时支持 Vue2 和 Vue3

许可证

MIT License