InputAuto 自动补全输入框

根据输入内容提供对应的输入建议。

基本用法

使用 v-model 绑定值；使用 fetch 作为输入时数据过滤函数。

查看代码

index.vue

<template>
	<demo-container class="gov-demo-inputauto">
		<gov-input-auto v-model="value" :fetch="querySearch" />
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
import { fruits } from "./data.js";

const value = ref("");
const querySearch = (str) => {
	return fruits.filter((el) => el.toLowerCase().includes(str.toLowerCase()));
};
</script>

data.js

export const fruits = [
	"Apple",
	"Banana",
	"Cherry",
	"Date",
	"Elderberry",
	"Fig",
	"Grape",
	"Honeydew",
	"Kiwi",
	"Lemon",
	"Mango",
	"Nectarine",
	"Orange",
	"Papaya",
	"Quince",
	"Raspberry",
	"Strawberry",
	"Tomato",
	"Ugli fruit",
	"Vanilla",
	"Watermelon",
	"Xigua",
	"Yumberry",
	"Zucchini",
];

export const fruitInfos = fruits.map((item) => ({
	value: item,
	label: item.toUpperCase(),
}));

自定义模板

可以在默认插槽内书写渲染模板。

• fetch 可以返回字符串集合或数据对象集合。
• 当返回对象集合时，valueKey 可指定用于 Input 的字段，默认为字符串 value。

查看代码

index.vue

<template>
	<demo-container class="gov-demo-inputauto">
		<gov-input-auto v-model="value" :fetch="querySearch">
			<template #default="{ item }">
				<div>大写：{{ item.value.toUpperCase() }}</div>
				<div style="font-size: 12px; color: #666">
					正常：<i>{{ item.value }}</i>
				</div>
			</template>
		</gov-input-auto>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
import { fruitInfos } from "./data.js";

const value = ref("");
const querySearch = (str) => {
	return fruitInfos.filter((el) =>
		el.value.toLowerCase().includes(str.toLowerCase()),
	);
};
</script>

data.js

export const fruits = [
	"Apple",
	"Banana",
	"Cherry",
	"Date",
	"Elderberry",
	"Fig",
	"Grape",
	"Honeydew",
	"Kiwi",
	"Lemon",
	"Mango",
	"Nectarine",
	"Orange",
	"Papaya",
	"Quince",
	"Raspberry",
	"Strawberry",
	"Tomato",
	"Ugli fruit",
	"Vanilla",
	"Watermelon",
	"Xigua",
	"Yumberry",
	"Zucchini",
];

export const fruitInfos = fruits.map((item) => ({
	value: item,
	label: item.toUpperCase(),
}));

Attributes

基于 Input 和 Popper 组件，更多内容不再赘述。

属性名	说明	类型	可选值	默认值
modelValue	绑定在输入框的值	String	—	undefined
fetch	获取数据的函数，返回一个数组	Function	—	—
valueKey	显示在input里的值的键名	String	—	"value"
popperHeight	popper 组件的高度	String	—	"200px"
size	输入框尺寸	String	—	—
triggerForm	是否触发表单验证	Boolean	true, false	true

Events

事件名	说明	回调参数
update:modelValue	绑定值更新时触发	新的值
input	输入时触发	输入的值
change	值改变时触发	新的值
select	选择列表中的一项时触发	选中的项
focus	输入框获得焦点时触发	—
blur	输入框失去焦点时触发	—
clear	清空按钮点击时触发	—

Slots

插槽名	说明
addonBefore	前置标签内容；和 Input 组件同理。
addonAfter	后置标签内容；和 Input 组件同理。
prefix	输入框前缀内容；和 Input 组件同理。
suffix	输入框后缀内容；和 Input 组件同理。
default	列表项内容，可以放置自定义的内容，用于渲染列表项。