uniapp vue2多选模糊下拉组件-EW帮帮网

FuzzySelect 组件使用文档

组件概述

FuzzySelect 是一个基于 Vue2 的 uni-app 模糊匹配下拉框组件，支持搜索筛选、多选、选项分组等功能，提供了良好的用户体验和自定义选项。

显示效果

安装与引入

将组件文件 FuzzySelect.vue 放入项目的 components 目录下，在需要使用的页面中引入：

<template>
  <view>
    <FuzzySelect :options="options" v-model="selectedValue" />
  </view>
</template>

<script>
import FuzzySelect from '@/components/FuzzySelect.vue';

export default {
  components: {
    FuzzySelect
  },
  data() {
    return {
      options: [
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' },
        { value: '3', label: '选项3' }
      ],
      selectedValue: ''
    }
  }
}
</script>

基础用法

单选模式

<FuzzySelect 
  :options="cities" 
  v-model="selectedCity"
  placeholder="请选择城市"
/>

多选模式

<FuzzySelect 
  :options="cities" 
  v-model="selectedCities"
  multiple
  placeholder="请选择城市"
/>

选项分组

<FuzzySelect 
  :options="groupOptions" 
  v-model="selectedGroupOption"
  placeholder="请选择"
/>


// 分组选项数据格式
groupOptions: [
  {
    label: '一线城市',
    children: [
      { value: 'beijing', label: '北京' },
      { value: 'shanghai', label: '上海' },
      { value: 'guangzhou', label: '广州' },
      { value: 'shenzhen', label: '深圳' }
    ]
  },
  {
    label: '新一线城市',
    children: [
      { value: 'chengdu', label: '成都' },
      { value: 'hangzhou', label: '杭州' },
      { value: 'wuhan', label: '武汉' }
    ]
  }
]

自定义过滤字段

<FuzzySelect 
  :options="complexOptions" 
  v-model="selectedComplexOption"
  :filterFields="['name', 'code']"
  placeholder="可搜索名称或代码"
/>

// 复杂选项数据格式
complexOptions: [
  { value: '1001', label: '北京', name: '北京市', code: '010' },
  { value: '1002', label: '上海', name: '上海市', code: '021' },
  { value: '1003', label: '广州', name: '广州市', code: '020' }
]

Props

参数	类型	默认值	说明
options	Array	[]	选项数据，支持分组格式
value	String/Number/Array	null	绑定值，单选时为单个值，多选时为数组
multiple	Boolean	false	是否支持多选
placeholder	String	‘请选择’	占位文本
searchPlaceholder	String	‘搜索…’	搜索框占位文本
showSearch	Boolean	true	是否显示搜索框
maxHeight	String	‘200px’	下拉列表最大高度
noDataText	String	‘暂无数据’	无数据时显示的文本
strictMatch	Boolean	false	是否严格匹配（区分大小写）
filterFields	Array	[‘label’]	搜索过滤的字段

事件

事件名	说明	返回值
input	值变更时触发	选中的值
change	值变更时触发	选中的值

方法

方法名	说明	参数	返回值
clearAllSelected	清空所有选中项	无	无

样式自定义

组件使用了 scoped 样式，如需自定义样式，可以通过覆盖 CSS 变量或直接修改组件内部样式来实现。

注意事项

确保选项数据格式正确，分组选项需要包含 children 字段
多选模式下，绑定值应为数组类型
在小程序环境下使用时，可能需要根据实际情况调整样式

通过以上方式，你可以灵活使用 FuzzySelect 组件实现各种下拉选择需求，享受其带来的模糊匹配、搜索筛选等便捷功能。

uniapp vue2多选模糊下拉组件