更新记录

1.0.0（2026-01-05） 下载此版本

• 多选选择器
• 字段映射配置
• v-model 双向绑定
• 兼容 H5、微信小程序

平台兼容性

uni-app(4.83)

multi-select-picker 多选选择器

简洁易用的多选选择器，支持自定义字段映射，零依赖纯原生实现。

平台兼容

✅ H5 ✅ 微信小程序

快速开始

<template>
  <view>
    <button @click="showPicker = true">选择</button>
    <multi-select-picker 
      v-model:show="showPicker" 
      v-model="selected"
      :list="options" 
      @confirm="onConfirm" 
    />
  </view>
</template>

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

const showPicker = ref(false);
const selected = ref([]);

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

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

Props

Events

字段映射

数据字段名不同时可配置映射：

<multi-select-picker
  v-model:show="showPicker"
  v-model="selected"
  :list="options"
  keyName="id"
  valueName="name"
/>

完整示例

<template>
  <view class="page">
    <view class="result">
      <text>已选择 {{ selected.length }} 项</text>
      <view v-for="item in selected" :key="item.value">
        {{ item.label }}
      </view>
    </view>

    <button @click="showPicker = true">选择</button>

    <multi-select-picker
      v-model:show="showPicker"
      v-model="selected"
      title="请选择"
      :list="options"
      @confirm="onConfirm"
      @change="onChange"
    />
  </view>
</template>

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

const showPicker = ref(false);
const selected = ref([]);

const options = [
  { value: '1', label: '苹果' },
  { value: '2', label: '香蕉' },
  { value: '3', label: '橙子' },
  { value: '4', label: '西瓜' },
  { value: '5', label: '葡萄' }
];

const onConfirm = (list) => {
  console.log('确认选择:', list);
};

const onChange = (list) => {
  console.log('实时变化:', list);
};
</script>

注意事项

• 零依赖，无需安装第三方库
• 支持 v-model 双向绑定
• 选中的值为完整对象数组

License

MIT