uniapp vue2多选模糊下拉组件

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

事件

方法

样式自定义

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

注意事项

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

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