更新记录

1.0.5（2026-02-03） 下载此版本

更新下滑问题

1.0.4（2026-01-28） 下载此版本

1、更新源代码

1.0.3（2026-01-28） 下载此版本

1.补充实例代码

平台兼容性

uni-app(3.6.17)

其他

fuzzySearch 组件使用说明

完整示例代码

<template>
  <view class="container">
    <view class="section">
      <text class="title">基本用法</text>
      <fuzzySearch 
        :data="options" 
        v-model="selectedValue1" 
        @input="handleInput('基本用法', $event)"
      />
    </view>

    <view class="section">
      <text class="title">带搜索功能</text>
      <fuzzySearch 
        :data="options" 
        v-model="selectedValue2" 
        :filterable="true"
        :searchType="1"
        placeholder="请输入关键词搜索"
        @input="handleInput('带搜索功能', $event)"
      />
    </view>

    <view class="section">
      <text class="title">带清空功能</text>
      <fuzzySearch 
        :data="options" 
        v-model="selectedValue3" 
        :clearable="true"
        :showDel="true"
        @input="handleInput('带清空功能', $event)"
      />
    </view>

    <view class="section">
      <text class="title">自定义样式</text>
      <fuzzySearch 
        :data="options" 
        v-model="selectedValue4" 
        :fontSize="'16px'"
        :fontColor="'#333'"
        :bgColor="'#f5f5f5'"
        :placeFontColor="'#999'"
        @input="handleInput('自定义样式', $event)"
      />
    </view>
  </view>
</template>

<script>
import fuzzySearch from '@/components/fuzzySearch/fuzzySearch.vue'

export default {
  components: { fuzzySearch },
  data() {
    return {
      selectedValue1: '',
      selectedValue2: '',
      selectedValue3: '',
      selectedValue4: '',
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' },
        { label: '选项4', value: '4' },
        { label: '选项5', value: '5' }
      ]
    }
  },
  methods: {
    handleInput(type, value) {
      console.log(`${type} 组件传递的值:`, value)
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.section {
  margin-bottom: 30px;
}

.title {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
</style>

## 参数配置

| 参数名 | 类型 | 默认值 | 说明 |
|-------|------|-------|------|
| `data` | Array | `[]` | 数据源：下拉选项数组（必传） |
| `valueType` | Object | `{ label: 'label', value: 'value' }` | 字段映射：自定义label和value的字段名 |
| `fontSize` | String | `'14px'` | 主文字大小 |
| `placeFontSize` | String | `'12px'` | 占位符文字大小 |
| `placeFontColor` | String | `'gray'` | 占位符文字颜色 |
| `fontColor` | String | `'gray !important'` | 主文字颜色 |
| `bgColor` | String | `'#EDF4FF'` | 输入框背景色 |
| `changeBtn` | Boolean | `false` | 每次选择是否都触发事件 |
| `showDel` | Boolean | `false` | 是否显示删除图标 |
| `value` | String/Number | `''` | 当前选中值（v-model绑定） |
| `clearable` | Boolean | `false` | 是否显示清空按钮 |
| `filterable` | Boolean | `false` | 是否启用搜索功能 |
| `searchType` | Number | `1` | 搜索类型：1-模糊搜索，2-精确搜索 |
| `placeholder` | String | `'请选择'` | 占位提示文本 |
| `noDataText` | String | `'暂无数据'` | 无匹配数据时显示文本 |
| `arrLeft` | Number | `20` | 下拉箭头左侧偏移量（px） |
| `size` | Number | `180` | 下拉框高度（px） |
| `sizeIcon` | Number | `18` | 右侧图标尺寸 |

## 方法说明

| 方法名 | 说明 | 参数 | 触发时机 |
|-------|------|------|----------|
| `change` | 选择选项 | `item`：当前选中的选项对象 | 点击下拉列表中的选项时 |
| `clearItem` | 清空选中值 | 无 | 点击清空按钮时 |
| `selectData` | 搜索过滤逻辑 | `e`：输入事件对象 | 输入框输入内容时（仅在filterable为true时生效） |