更新记录
1.0.1(2025-04-23) 下载此版本
添加输入防抖
1.0.0(2025-02-13) 下载此版本
初始版本
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
× | √ | - | - | × | × | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | - | × | × | - | - |
cl-autocomplete 输入框提示组件
组件作用
提供带搜索过滤功能的下拉选择组件,适用于以下场景:
- 输入时有提示数据
- 输入时实时过滤备选数据
Props 属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
options | Array | [] | 必填,选项数组(当前仅支持字符串数组) |
modelValue | String | '' | 输入框绑定值,使用v-model双向绑定 |
placeholder | String | '请选择' | 输入框占位文本 |
maxHeight | [String, Number] | 300 | 下拉提示列表最大高度(单位:px) |
placeholderStyle | String | '' | 自定义占位符样式(支持CSS字符串) |
disabled | Boolean | false | 是否禁用输入框 |
maxlength | Number | 20 | 最大输入长度 |
hideBorder | Boolean | false | 是否隐藏输入框边框 |
cursorSpacing | Number | 300 | 键盘弹起时光标距离输入框的高度(单位:px) |
type | String | 'text' | 输入框类型,支持uni-easyinput所有类型(text/number/password等) |
基本使用示例
<template>
<cl-autocomplete
v-model="searchText"
:options="fruitList"
placeholder="搜索水果"
max-height="400"
/>
</template>
<script setup>
const fruitList = ['Apple', 'Banana', 'Orange', 'Mango', 'Strawberry']
const searchText = ref('')
</script>