组件
自动补全 Autocomplete
Autocomplete:带建议的自由输入。使用者可以输入任意文本,列表会收窄以辅助选择;无论是选择建议还是提交自定义值,结果都写入同一个 `modelValue`。它是 combobox 状态机的一组预设,部件和样式相同,只面向这一个场景。`items` 只在初始时填充建议列表;除非 `filter` 另有指定,匹配规则是不区分大小写的子串匹配。
#基础用法
<script setup lang="ts">
import { AutoComplete } from "@bysages/vue";
import { ref } from "vue";
const value = ref("");
const items = ["Cobalt", "Celadon", "Cinnabar", "Ochre", "Ultramarine", "Bamboo", "Indigo"];
</script>
<template>
<AutoComplete v-model="value" :items="items" placeholder="Pick a pigment…" class="w-full" />
</template>
#属性
#AutoComplete
Autocomplete:带建议的自由输入。使用者可以输入任意文本,列表会收窄以辅助选择;无论是选择建议还是提交自定义值,结果都写入同一个 modelValue。它是 combobox 状态机的一组预设,部件和样式相同,只面向这一个场景。items 只在初始时填充建议列表;除非 filter 另有指定,匹配规则是不区分大小写的子串匹配。
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
modelValue | String | "" | — |
items | Array as PropType<string[]> | () => [] | — |
placeholder | String | undefined | — |
filter | Function as PropType<(item: string, input: string) => boolean> | undefined | 参与匹配的字段文本;默认匹配条目本身 |
size | String as PropType<"sm" | "md" | "lg"> | "md" | 字段行高度,可为 sm、md 或 lg |