更新记录

1.0.0（2025-11-29） 下载此版本

下拉选择器支持模糊搜索，uni-data-select扩展组件,支持vue3

平台兼容性

其他

Select 选择器组件文档

简介

Select 是一个基于 uni-app 的自定义选择器组件，支持下拉选择、输入过滤、双向数据绑定等功能。

功能特性

• 🔍 支持输入过滤选项
• 🎯 支持双向数据绑定 (v-model)
• 📱 响应式设计，兼容移动端
• ✨ 可自定义选项标签和值字段名
• 🧹 支持清空输入
• ⌨️ 键盘友好操作

基本用法

<template>
  <select-box
    v-model="selectedValue"
    :options="options"
    label-name="label"
    value-name="value"
    @change="handleChange"
  />
</template>

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

const selectedValue = ref('')
const options = ref([
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' }
])

const handleChange = (item) => {
  console.log('选中项:', item)
}
</script>

Props 属性

Events 事件

选项数据格式

选项数据应为对象数组，每个对象包含标签和值字段：

const options = [
  { label: '显示文本1', value: '值1' },
  { label: '显示文本2', value: '值2' }
]

如果需要自定义字段名，可以通过 labelName和 valueName属性指定：

<select-box
  v-model="selectedValue"
  :options="options"
  label-name="name"
  value-name="id"
/>

高级用法

带过滤功能的使用

<template>
  <select-box
    v-model="selectedValue"
    :options="userList"
    label-name="username"
    value-name="userId"
    @change="onUserSelect"
  />
</template>

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

const selectedValue = ref('')
const userList = ref([
  { username: '张三', userId: '001', department: '技术部' },
  { username: '李四', userId: '002', department: '市场部' },
  { username: '王五', userId: '003', department: '技术部' }
])

const onUserSelect = (user) => {
  console.log('选中用户:', user)
  // 可以获取到完整的用户信息
}
</script>

禁用清空功能

<select-box
  v-model="selectedValue"
  :options="options"
  :clearable="false"
/>

样式定制

组件使用 SCSS 编写样式，可以通过以下 CSS 变量或类名进行样式定制：

CSS 类名

• .select-box- 组件容器
• .panel- 下拉面板
• .options-item- 选项项
• .select-item- 可选择的选项项

示例：自定义样式

// 自定义主题
.select-box {
  .panel {
    background-color: #f5f5f5;
    border-color: #ddd;

    .options-item {
      color: #333;

      &:hover {
        background-color: #e0e0e0;
      }
    }
  }
}

注意事项

1. 选项数据更新：当 options属性发生变化时，组件会自动更新显示选项
2. 初始值设置：通过 v-model设置初始选中值时，组件会自动显示对应的标签文本
3. 输入过滤：在输入框输入内容时，会自动过滤显示匹配的选项
4. 空状态处理：当没有匹配的选项时会显示"无选项"

浏览器兼容性

• 支持所有现代浏览器
• 移动端兼容性良好
• 基于 uni-app，支持多端运行

版本日志

v1.0.0

• 初始版本发布
• 支持基本选择功能
• 支持输入过滤
• 支持双向数据绑定