更新记录

0.1.0（2025-05-07） 下载此版本

2025-05-07

• 新增输入候选词选择组件

平台兼容性

u-input-select 输入选择组件

介绍

u-input-select 是一个结合了输入框和下拉选择功能的组件，支持输入搜索和下拉选择，适用于需要快速选择或搜索选项的场景。

特性

• 支持输入搜索过滤
• 支持下拉选择
• 支持键盘输入
• 自动过滤匹配选项
• 选中项高亮显示
• 空数据提示

属性说明

事件说明

基础用法

<template>
  <u-input-select
    v-model="selectedValue"
    :options="options"
    placeholder="请选择"
    @change="onChange"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' }
      ]
    }
  },
  methods: {
    onChange(item) {
      console.log('选中项：', item)
    }
  }
}
</script>

样式说明

组件采用了响应式设计，主要样式特点：

• 输入框高度40px，带有边框和圆角
• 下拉框最大高度200px，超出部分可滚动
• 选中项和悬停项有特殊的背景色标识
• 带有下拉箭头图标，点击时有旋转动画
• 支持暗色主题

注意事项

1. options数组中的对象必须包含label和value属性
2. 组件会自动处理失焦事件，延迟200ms关闭下拉框
3. 支持键盘输入和鼠标点击两种操作方式
4. 组件内部会自动处理大小写敏感的过滤逻辑

贡献

如果您在使用过程中发现任何问题，欢迎提出建议或贡献代码。