自动填充 AutoComplete
有提示的文本输入框。
基础使用
传入 options 作为选项。传入 modelValue 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultValue 属性作为默认值。
<template>
<px-space direction="vertical">
<px-auto-complete
placeholder="Please input"
v-model="input"
:options="options"
></px-auto-complete>
<px-auto-complete
placeholder="Please input"
:options="options"
default-value="test"
></px-auto-complete>
</px-space>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const input = ref('')
const options = ref<string[]>([
'pear',
'plum',
'cherry',
'blueberry',
'raspberry',
'blackberry',
'lemon',
'lime',
'pomegranate',
'apricot'
])
</script>
<style lang="css" scoped>
.px-auto-complete {
width: 320px;
}
</style>禁用选项
options 中，选项置 disabled 为 true 可禁用选项。
<template>
<px-auto-complete
placeholder="Please input"
v-model="input"
:options="options"
></px-auto-complete>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const input = ref('')
const options = ref(
[
'apple',
'banana',
'orange',
'grape',
'strawberry',
'kiwi',
'mango',
'pineapple',
'watermelon',
'peach'
].map((item, index) => {
return {
label: item,
value: item,
disabled: (index & 1) === 1
}
})
)
</script>
<style lang="css" scoped>
.px-auto-complete {
width: 320px;
}
</style>分组
options 中，也支持传入选项组。
<template>
<px-auto-complete
placeholder="Please input"
v-model="input"
:options="options"
></px-auto-complete>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const input = ref('')
const options = ref([
{
type: 'group',
label: 'tropical fruits',
children: [
{ label: 'mango', value: 'mango' },
{ label: 'pineapple', value: 'pineapple' },
{ label: 'papaya', value: 'papaya' },
{ label: 'dragon fruit', value: 'dragon fruit' },
{ label: 'durian', value: 'durian' },
{ label: 'lychee', value: 'lychee' },
{ label: 'longan', value: 'longan' }
]
},
{
type: 'group',
label: 'citrus fruits',
children: [
{ label: 'orange', value: 'orange' },
{ label: 'lemon', value: 'lemon' },
{ label: 'lime', value: 'lime' },
{ label: 'grapefruit', value: 'grapefruit' },
{ label: 'tangerine', value: 'tangerine' }
]
}
])
</script>
<style lang="css" scoped>
.px-auto-complete {
width: 320px;
}
</style>远程加载
设置 loading、showPopoverEmpty 属性和监听 input 事件，实现远程加载时的 UI 变化。
<template>
<px-auto-complete
placeholder="Please input"
v-model="input"
:options="options"
:loading="loading"
show-popover-empty
@input="inputHandler"
></px-auto-complete>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const input = ref('')
const loading = ref(false)
const options = ref<string[]>([])
const data = [
'pear',
'plum',
'cherry',
'blueberry',
'raspberry',
'blackberry',
'lemon',
'lime',
'pomegranate',
'apricot'
]
const inputHandler = () => {
options.value = []
loading.value = true
setTimeout(() => {
options.value = data
loading.value = false
}, 6000)
}
</script>
<style lang="css" scoped>
.px-auto-complete {
width: 320px;
}
</style>追加模式
选中选项后添加到输入框而不是覆盖原内容，需要设置 append 属性开启，配合传入 filter、shouldShowPopover 函数控制弹出框的选项和展示。
<template>
<px-auto-complete
placeholder="Please input"
v-model="input"
:options="options"
:filter="filter"
:shouldShowPopover="shouldShowPopover"
append
></px-auto-complete>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const input = ref('')
const options = ref<string[]>(['gmail.com', '163.com', 'qq.com'])
const filter = (_: string, options: string[]) => {
return options
}
const shouldShowPopover = (value: string) => {
return value.endsWith('@')
}
</script>
<style lang="css" scoped>
.px-auto-complete {
width: 320px;
}
</style>虚拟列表
virtualScroll 属性开启虚拟列表，选项数据量大时可以开启提高性能。
<template>
<px-auto-complete
placeholder="Please input"
v-model="input"
:options="options"
virtual-scroll
></px-auto-complete>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const input = ref('')
const data = [
'pear',
'plum',
'cherry',
'blueberry',
'raspberry',
'blackberry',
'lemon',
'lime',
'pomegranate',
'apricot',
'apple',
'banana',
'orange',
'grape',
'strawberry',
'mango',
'pineapple',
'peach',
'kiwi',
'watermelon',
'grapefruit',
'tangerine',
'mandarin',
'nectarine',
'fig',
'date',
'olive',
'coconut',
'avocado',
'papaya',
'guava',
'passion fruit',
'lychee',
'longan',
'dragon fruit',
'durian',
'rambutan',
'star fruit',
'persimmon',
'cantaloupe',
'honeydew',
'mulberry',
'gooseberry',
'currant',
'elderberry',
'cranberry',
'boysenberry',
'loganberry',
'cloudberry',
'salmonberry',
'lingonberry',
'bilberry',
'huckleberry',
'acai berry',
'goji berry',
'maqui berry',
'camu camu',
'cupuacu',
'mamey',
'sapodilla',
'soursop',
'guanabana',
'jackfruit',
'pulasan',
'mangosteen',
'star apple',
'rose apple',
'wax apple',
'java plum',
'black plum',
'white sapote',
'black sapote',
'marmalade plum',
'pepino',
'tamarillo',
'cape gooseberry',
'ground cherry',
'physalis',
'naranjilla',
'lulo',
'tomato',
'potato',
'carrot',
'onion',
'garlic',
'cucumber',
'bell pepper',
'spinach',
'lettuce',
'broccoli',
'cauliflower',
'green bean',
'pea',
'zucchini',
'eggplant',
'celery',
'asparagus',
'brussels sprout',
'kale',
'chard',
'radish',
'turnip',
'parsnip',
'yam',
'pumpkin',
'squash',
'artichoke',
'leek',
'shallot',
'chive',
'scallion',
'beet',
'swiss chard',
'collard green',
'mustard green',
'dandelion green',
'endive',
'escarole',
'fennel',
'bok choy',
'napa cabbage',
'green cabbage',
'red cabbage',
'purple cabbage',
'watercress',
'mushroom',
'okra',
'sweet corn',
'corn',
'rhubarb',
'kohlrabi',
'rutabaga',
'celtuce',
'bamboo shoot',
'heart of palm',
'jerusalem artichoke',
'sunchoke',
'chayote',
'pattypan squash',
'butternut squash',
'acorn squash',
'spaghetti squash',
'yellow squash',
'crookneck squash',
'aubergine',
'cherry tomato',
'plum tomato',
'beefsteak tomato',
'roma tomato',
'grape tomato',
'heirloom tomato',
'red bell pepper',
'green bell pepper',
'yellow bell pepper',
'orange bell pepper',
'jalapeno',
'habanero',
'serrano',
'cayenne pepper',
'tabasco pepper',
'poblano',
'ancho',
'chipotle',
'fresno pepper',
'banana pepper',
'pepperoncini',
'shishito pepper',
'string bean',
'snap bean',
'haricot vert',
'lima bean',
'butter bean',
'fava bean',
'broad bean',
'black bean',
'kidney bean',
'pinto bean',
'navy bean',
'cannellini bean',
'great northern bean',
'adzuki bean',
'mung bean',
'soybean',
'lentil',
'red lentil',
'green lentil',
'brown lentil',
'black lentil',
'chickpea',
'garbanzo bean',
'green pea',
'snow pea',
'sugar snap pea',
'split pea',
'black-eyed pea',
'cowpea',
'okra pod',
'baby spinach',
'flat-leaf spinach',
'malabar spinach',
'water spinach',
'curly kale',
'tuscan kale',
'lacinato kale',
'red kale',
'kale rabe',
'rapini',
'collard greens',
'mustard greens',
'turnip greens',
'dandelion greens',
'rainbow chard',
'beet greens',
'spinach beet',
'curly endive',
'frisée',
'radicchio',
'arugula',
'rocket',
'land cress',
'nasturtium',
'sorrel',
'iceberg lettuce',
'romaine lettuce',
'butterhead lettuce',
'boston lettuce',
'bibb lettuce',
'leaf lettuce',
'green leaf lettuce',
'red leaf lettuce',
'mixed greens',
'mesclun',
'microgreens',
'alfalfa sprouts',
'bean sprouts',
'mung bean sprouts',
'radish sprouts',
'broccoli sprouts',
'sunflower sprouts',
'yellow onion',
'red onion',
'white onion',
'sweet onion',
'vidalia onion',
'walla walla onion',
'green onion',
'garlic clove',
' elephant garlic',
'ramp',
'wild leek',
'garlic chive',
'chives',
'green asparagus',
'white asparagus',
'purple asparagus',
'celery stalk',
'celery root',
'celeriac',
'fennel bulb',
'fennel frond',
'orange carrot',
'purple carrot',
'yellow carrot',
'white carrot',
'baby carrot',
'swede',
'red radish',
'daikon radish',
'black radish',
'watermelon radish',
'horseradish',
'wasabi',
'red beet',
'golden beet',
'chioggia beet',
'sugar beet',
'orange sweet potato',
'purple sweet potato',
'white sweet potato',
'true yam',
'russet potato',
'yukon gold potato',
'red potato',
'white potato',
'fingerling potato',
'sweet potato',
'taro',
'eddoe',
'malanga',
'yucca',
'cassava',
'manioc',
'jicama',
' Jerusalem artichoke',
'ginger',
'fresh ginger',
'galangal',
'turmeric',
'fresh bamboo shoot',
'canned bamboo shoot',
'globe artichoke',
'broccoli crown',
'broccoli floret',
'broccoli stem',
'white cauliflower',
'purple cauliflower',
'green cauliflower',
'romanesco broccoli',
'baby brussels sprout',
'cabbage',
'savoy cabbage',
'chinese cabbage',
'pak choi',
'baby bok choy',
'tatsoi',
'mizuna',
'komatsuna',
'white button mushroom',
'cremini mushroom',
'portobello mushroom',
'shiitake mushroom',
'oyster mushroom',
'enoki mushroom',
'beech mushroom',
'shimeji mushroom',
'maitake mushroom',
'reishi mushroom',
'cordyceps',
'truffle',
'black truffle',
'white truffle',
'morel',
'chanterelle',
'ceps',
'porcini',
'pie pumpkin',
'sugar pumpkin',
'jack-o-lantern pumpkin',
'hubbard squash',
'kabocha squash',
'delicata squash',
'summer squash',
'winter squash',
'mirliton',
'tomatillo',
'chinese eggplant',
'Japanese eggplant',
'white eggplant',
'grape eggplant',
'ladyfinger',
'baby corn',
'corn on the cob',
'popcorn',
'water chestnut',
'lotus root',
'elephant garlic',
'Jerusalem artichoke',
'starfruit',
'carambola',
'kiwifruit',
'kiwi berry',
'golden kiwi',
'green kiwi',
'fuyu persimmon',
'hachiya persimmon',
'medjool date',
'deglet noor date',
'black fig',
'green fig',
'mission fig',
'kadota fig',
'green olive',
'black olive',
'kalamata olive',
'gaeta olive',
'young coconut',
'mature coconut',
'coconut water',
'coconut meat',
'hass avocado',
' fuerte avocado',
'zutano avocado',
'pinkerton avocado',
'solo papaya',
'maradol papaya',
'strawberry guava',
'common guava',
'purple passion fruit',
'yellow passion fruit',
'litchi',
'dragon eye',
'red dragon fruit',
'yellow dragon fruit',
'caimito',
'jambu',
'jamun',
'chocolate pudding fruit',
'melon pear',
'tree tomato',
'uchuva',
'aguaymanto',
'breadfruit',
'chempedak',
'cempedak',
'graviola',
'custard apple',
'cherimoya',
'atemoya',
'sweetsop',
'annon',
'mamey sapote',
'chico',
'naseberry',
'sapote',
'yellow sapote',
'canistel',
'eggfruit',
'lucuma',
'pawpaw',
'asimina',
'pommegranate',
'quince',
'loquat',
'Japanese plum',
'date plum',
'sloe',
'blackthorn',
'serviceberry',
'juneberry',
'hawthorn berry',
'rowan berry',
'mountain ash',
'black elderberry',
'red elderberry',
'aronia berry',
'chokeberry',
'highbush blueberry',
'lowbush blueberry',
'rabbiteye blueberry',
'whortleberry',
'black huckleberry',
'blue huckleberry',
'cowberry',
'partridgeberry',
'American cranberry',
'European cranberry',
'bearberry',
'kinnikinnick',
'garden strawberry',
'alpine strawberry',
'wild strawberry',
'red raspberry',
'black raspberry',
'purple raspberry',
'golden raspberry',
'dewberry',
'tayberry',
'marionberry',
'olallieberry',
'youngberry',
'bakeapple',
'thimbleberry',
'wineberry',
'black mulberry',
'red mulberry',
'white mulberry',
'green gooseberry',
'red gooseberry',
'golden gooseberry',
'red currant',
'black currant',
'white currant',
'pink currant',
'wolfberry',
'goji',
'acai',
'copuacu',
'bacuri',
'buriti',
'pupunha',
'jaca',
'mangaba',
'murici',
'pitanga',
'surinam cherry',
'pitaya',
'prickly pear',
'cactus fruit',
'tuna',
'sabra',
'green grape',
'red grape',
'purple grape',
'black grape',
'seedless grape',
'concord grape',
'thompson seedless',
'crimson seedless',
'muscat grape',
'champagne grape',
'raisin',
'sultana',
'dried currant',
'dried apricot',
'prune',
'dried plum',
'sweet cherry',
'sour cherry',
'tart cherry',
'bing cherry',
'rainier cherry',
'cherry plum',
'myrobalan',
'bartlett pear',
'bosc pear',
'anjou pear',
'comice pear',
'seckel pear',
'red apple',
'green apple',
'yellow apple',
'honeycrisp apple',
'fuji apple',
'gala apple',
'pink lady apple',
'granny smith apple',
'golden delicious apple',
'red delicious apple',
'mcintosh apple',
'braeburn apple',
'jazz apple',
'envy apple',
'cosmic crisp apple',
'navel orange',
'valencia orange',
'blood orange',
'clementine',
'satsuma',
'tangelo',
'minneola',
'ugli fruit',
'white grapefruit',
'pink grapefruit',
'red grapefruit',
'pomelo',
'shaddock',
'meyer lemon',
'eureka lemon',
'lisbon lemon',
'key lime',
'persian lime',
'kaffir lime',
'bergamot',
'yuzu',
'kumquat',
'calamondin',
'finger lime',
'lemonade fruit',
'rangpur',
'mandarin lime',
'smooth cayenne pineapple',
'golden pineapple',
'sugarloaf pineapple',
'baby pineapple',
'alphonso mango',
'tommy atkins mango',
'haden mango',
'kent mango',
'keitt mango',
'ataulfo mango',
'manila mango',
'seedless watermelon',
'yellow watermelon',
'mini watermelon',
'muskmelon',
'charentais melon',
'green honeydew',
'orange honeydew',
'crenshaw melon',
'casaba melon',
'canary melon',
'galia melon',
'melon',
'winter melon',
'wax gourd',
'ash gourd',
'bitter melon',
'bitter gourd',
' karela',
'sponge gourd',
'luffa',
'ridge gourd',
'snake gourd',
'bottle gourd',
'calabash'
]
const options = ref(data)
</script>
<style lang="css" scoped>
.px-auto-complete {
width: 320px;
}
</style>自定义渲染
option 插槽自定义选项渲染，group-label 插槽自定义分组标签名渲染。
<template>
<px-auto-complete placeholder="Please input" v-model="input" :options="options">
<template #group-label="{ option }">
{{ option.label }}
<div
style="margin-left: 12px; color: red; font-size: 16px"
v-if="option.label === 'citrus fruits'"
>
HOT!
</div>
</template>
<template #option="{ option }">
{{ option.label }}
<px-tag style="margin-left: 12px" v-if="option.value === 'orange'">NEW!</px-tag>
</template>
</px-auto-complete>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const input = ref('')
const options = ref([
{
type: 'group',
label: 'citrus fruits',
children: [
{ label: 'orange', value: 'orange' },
{ label: 'lemon', value: 'lemon' },
{ label: 'lime', value: 'lime' },
{ label: 'grapefruit', value: 'grapefruit' },
{ label: 'tangerine', value: 'tangerine' }
]
},
{
type: 'group',
label: 'tropical fruits',
children: [
{ label: 'mango', value: 'mango' },
{ label: 'pineapple', value: 'pineapple' },
{ label: 'papaya', value: 'papaya' },
{ label: 'dragon fruit', value: 'dragon fruit' },
{ label: 'durian', value: 'durian' },
{ label: 'lychee', value: 'lychee' },
{ label: 'longan', value: 'longan' }
]
}
])
</script>
<style lang="css" scoped>
.px-auto-complete {
width: 320px;
}
</style>更多配置
AutoComplete 还拥有 Input 组件的大部分功能。
Disabled, Readonly, Loading & Clearable
Shape
Size
Slot
prefix
suffix
Composite
Status
Expose
<template>
<px-space direction="vertical">
<h4>Disabled, Readonly, Loading & Clearable</h4>
<px-space>
<px-auto-complete
placeholder="Please input"
disabled
:options="options"
></px-auto-complete>
<px-auto-complete
placeholder="Please input"
readonly
:options="options"
></px-auto-complete>
<px-auto-complete
placeholder="Please input"
loading
:options="options"
></px-auto-complete>
<px-auto-complete
placeholder="Please input"
clearable
:options="options"
></px-auto-complete>
</px-space>
<h4>Shape</h4>
<px-space>
<px-auto-complete
placeholder="Please input"
shape="round"
:options="options"
></px-auto-complete>
<px-auto-complete placeholder="Please input" :options="options"></px-auto-complete>
</px-space>
<h4>Size</h4>
<px-space>
<px-auto-complete
placeholder="Please input"
size="small"
:options="options"
></px-auto-complete>
<px-auto-complete placeholder="Please input" :options="options"></px-auto-complete>
<px-auto-complete
placeholder="Please input"
size="large"
:options="options"
></px-auto-complete>
</px-space>
<h4>Slot</h4>
<px-space>
<px-auto-complete placeholder="Please input" :options="options">
<template #prefix>prefix</template>
<template #suffix>suffix</template>
</px-auto-complete>
</px-space>
<h4>Composite</h4>
<px-space>
<px-input-group>
<px-input-group-label>
<IconBolt></IconBolt>
</px-input-group-label>
<px-auto-complete placeholder="Please input" :options="options"> </px-auto-complete>
<px-button>Confirm</px-button>
</px-input-group>
</px-space>
<h4>Status</h4>
<px-space>
<px-auto-complete placeholder="Please input" :options="options"> </px-auto-complete>
<px-auto-complete placeholder="Please input" :options="options" status="success">
</px-auto-complete>
<px-auto-complete placeholder="Please input" :options="options" status="warning">
</px-auto-complete>
<px-auto-complete placeholder="Please input" :options="options" status="error">
</px-auto-complete>
</px-space>
<h4>Expose</h4>
<px-space direction="vertical">
<px-space>
<px-button theme="info" @click="focusHandler">Focus</px-button>
<px-button theme="info" @click="blurHandler">Blur</px-button>
<px-button theme="info" @click="selectHandler">Select</px-button>
<px-button theme="warning" @click="clearHandler">Clear</px-button>
</px-space>
<px-auto-complete
placeholder="Please input"
:options="options"
ref="autoCompleteRef"
></px-auto-complete>
</px-space>
</px-space>
</template>
<script setup lang="ts">
import { IconBolt } from '@pixelium/web-vue/icon-hn/es'
import { ref } from 'vue'
import { AutoComplete } from '@pixelium/web-vue'
// If on-demand import
// import { AutoComplete } from '@pixelium/web-vue/es'
const autoCompleteRef = ref<InstanceType<typeof AutoComplete>>(null)
const focusHandler = () => {
autoCompleteRef.value?.focus()
}
const blurHandler = () => {
autoCompleteRef.value?.blur()
}
const clearHandler = () => {
autoCompleteRef.value?.clear()
}
const selectHandler = () => {
autoCompleteRef.value?.select()
}
const options = ref<string[]>([
'pear',
'plum',
'cherry',
'blueberry',
'raspberry',
'blackberry',
'lemon',
'lime',
'pomegranate',
'apricot'
])
</script>
<style lang="css" scoped>
.px-auto-complete {
width: 320px;
}
</style>API
AutoCompleteProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| modelValue | string | null | 是 | | 自动填充输入框的值（受控模式），支持 v-model。 | 0.0.2 |
| defaultValue | string | null | 是 | | 自动填充输入框的默认值（非受控模式）。 | 0.0.2 |
| options | string | 是 | | 选项列表。 | 0.0.2 |
| placeholder | string | 是 | | 占位符文本。 | 0.0.2 |
| disabled | boolean | 是 | false | 是否禁用。 | 0.0.2 |
| readonly | boolean | 是 | false | 是否只读。 | 0.0.2 |
| clearable | boolean | 是 | false | 是否显示清除按钮。 | 0.0.2 |
| loading | boolean | 是 | false | 是否显示加载状态。 | 0.0.2 |
| size | 'medium' | 'large' | 'small' | 是 | 'medium' | 自动填充输入框尺寸。 | 0.0.2 |
| shape | 'rect' | 'round' | 是 | 'rect' | 自动填充输入框形状。 | 0.0.3 |
| showPopoverEmpty | boolean | 是 | false | 是否在选项为空时展示弹出框。 | 0.0.2 |
| shouldShowPopover | (value: string, optionsFiltered: (string | AutoCompleteOption | AutoCompleteGroupOption)[]) => boolean | 是 | | 判断输入时是否展示弹出框的函数。 | 0.0.2 |
| filter | (keyword: string, options: (string | AutoCompleteOption | AutoCompleteGroupOption)[]) => (string | AutoCompleteOption | AutoCompleteGroupOption)[] | 是 | | 筛选选项的函数。 | 0.0.2 |
| append | boolean | 是 | false | 追加模式。 | 0.0.2 |
| virtualScroll | boolean | 是 | false | 是否开启虚拟滚动。 | 0.0.3 |
| virtualListProps | Omit<VirtualListProps, 'list' | 'fixedHeight'> | 是 | | 虚拟列表属性。 | 0.0.3 |
| borderRadius | NumberOrPercentage | NumberOrPercentage[] | 是 | | 圆角半径，优先级高于 shape，与 CSS border-radius 行为一致；单值或长度为 1 的数组 → 四角同时生效；长度为 2 的数组 → [左上 & 右下, 右上 & 左下]；长度为 3 的数组 → [左上, 右上 & 左下, 右下]；长度为 4 的数组 → 按顺时针顺序依次作用于四角。 | 0.0.2 |
| status | 'success' | 'warning' | 'error' | 'normal' | 是 | 'normal' | 表单验证状态。 | 0.0.2 |
| autofocus | boolean | 是 | false | 原生 <input> 的 autofocus 属性。 | 0.0.2 |
| optionsDestroyOnHide | boolean | 是 | false | 下拉选项是否会在隐藏时销毁。 | 0.0.3 |
AutoCompleteEvents
| 事件 | 参数 | 描述 | 版本 |
|---|---|---|---|
| input | value: string, e: Event | 自动填充输入框输入时的回调。 | 0.0.2 |
| update:modelValue | value: string | 更新 modelValue 的回调。 | 0.0.2 |
| change | value: string, e: Event | undefined | 输入内容变化时的回调。 | 0.0.2 |
| clear | value: string | 点击清除文本按钮，清除内容时的回调。 | 0.0.2 |
| blur | e: FocusEvent | 自动填充输入框失焦时的回调。 | 0.0.2 |
| focus | e: FocusEvent | 自动填充输入框聚焦时的回调。 | 0.0.2 |
| select | value: string, option: string | AutoCompleteOption, e: MouseEvent | 选中选项的回调。 | 0.0.2 |
AutoCompleteSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| prefix | | 前缀内容。 | 0.0.2 |
| suffix | | 后缀内容。 | 0.0.2 |
| option | option: string | AutoCompleteOption | 选项内容。 | 0.0.2 |
| group-label | option: AutoCompleteGroupOption | 选项组的标签名。 | 0.0.2 |
AutoCompleteExpose
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| focus | () => void | 否 | | 聚焦当前控件。 | 0.0.2 |
| blur | () => void | 否 | | 取消聚焦当前控件。 | 0.0.2 |
| clear | () => void | 否 | | 清空当前输入内容。 | 0.0.2 |
| select | () => void | 否 | | 选中当前输入内容。 | 0.0.2 |
AutoCompleteOption, AutoCompleteGroupOption
ts
export interface Option<T = any> {
value: T
label: string
}
export interface GroupOption<T = any> {
children: (Option<T> | string)[]
type: typeof GROUP_OPTION_TYPE
}
export interface OptionListOption<T = any> extends Option<T> {
disabled?: boolean
key?: string | number | symbol
}
export interface OptionListGroupOption extends GroupOption {
label: string
key: string | number | symbol
children: (OptionListOption | string)[]
}
export interface AutoCompleteOption extends OptionListOption<string> {
}
export interface AutoCompleteGroupOption extends OptionListGroupOption {
children: (AutoCompleteOption | string)[]
}