@tanzhenxing/zx-select v1.0.4

zx-select 选择器组件

一个基于uni-app的选择器组件，支持单选、多选、搜索、分组等功能，兼容H5、小程序和APP。

特性

• 单选和多选模式
• 支持可清空选择
• 支持禁用状态和禁用选项
• 支持选项搜索过滤
• 支持选项分组
• 自定义模板（前缀、选项、标签等）
• 支持H5、各类小程序以及APP

使用方法

基础用法

<template>
  <view>
    <zx-select 
      v-model="value" 
      :options="options" 
      placeholder="请选择"
    />
  </view>
</template>

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

const value = ref('');
const options = ref([
  { label: '选项一', value: '1' },
  { label: '选项二', value: '2' },
  { label: '选项三', value: '3' },
  { label: '选项四', value: '4' },
  { label: '选项五', value: '5' }
]);
</script>

禁用状态

<zx-select 
  v-model="value" 
  :options="options" 
  disabled
/>

可清空单选

<zx-select 
  v-model="value" 
  :options="options" 
  clearable
/>

基础多选

<zx-select 
  v-model="value" 
  :options="options" 
  multiple
/>

可搜索

<zx-select 
  v-model="value" 
  :options="options" 
  filterable
  search-placeholder="请输入关键词搜索"
/>

分组选项

<template>
  <zx-select v-model="value" :options="groupOptions" />
</template>

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

const value = ref('');
const groupOptions = ref([
  {
    label: '热门城市',
    value: 'hot',
    group: '城市分类'
  },
  {
    label: '北京',
    value: 'Beijing',
    group: '直辖市'
  },
  {
    label: '上海',
    value: 'Shanghai',
    group: '直辖市'
  },
  {
    label: '广州',
    value: 'Guangzhou',
    group: '广东省'
  },
  {
    label: '深圳',
    value: 'Shenzhen',
    group: '广东省'
  }
]);
</script>

自定义模板

<zx-select v-model="value" :options="options">
  <template #prefix>
    <text class="custom-prefix">城市:</text>
  </template>
  
  <template #option="{ item }">
    <view class="custom-option">
      <text>{{ item.label }}</text>
      <text class="custom-desc">{{ item.description }}</text>
    </view>
  </template>
</zx-select>

API

Props

Events

Slots