Search 搜索框

用于页面内容搜索的输入框，支持清除、加载状态和搜索按钮。

基础用法

<ASearch placeholder="搜索组件..." />

尺寸

<ASearch size="sm" placeholder="小型搜索" />
<ASearch size="md" placeholder="默认搜索" />
<ASearch size="lg" placeholder="大型搜索" />

可清除

默认带有清除按钮，输入内容后显示。

<script setup lang="ts">
import { ref } from 'vue'
const searchVal = ref('可清除的文本')
</script>

<ASearch v-model="searchVal" />

搜索按钮

设置 searchButton 显示右侧搜索按钮。传入字符串可自定义按钮文字。

<ASearch search-button placeholder="图标搜索按钮" />
<ASearch search-button="搜索" placeholder="文字搜索按钮" />

加载状态

<ASearch loading model-value="搜索中..." />

禁用状态

<ASearch disabled model-value="已禁用" />

API

Props

名称	类型	默认值	说明
modelValue	string	''	绑定值
placeholder	string	'搜索...'	占位文本
disabled	boolean	false	是否禁用
clearable	boolean	true	是否可清除
loading	boolean	false	是否加载中
size	'sm' | 'md' | 'lg'	'md'	尺寸
searchButton	boolean | string	false	是否显示搜索按钮；传入字符串自定义按钮文本

Events

名称	参数	说明
update:modelValue	value: string	输入时触发
search	value: string	按回车或点击搜索按钮时触发
clear	—	点击清除按钮时触发
focus	event: FocusEvent	获得焦点时触发
blur	event: FocusEvent	失去焦点时触发

Expose

名称	说明
focus	手动聚焦