Search 搜索

介绍

搜索场景的输入框组件。

基础用法

通过 v-model 绑定搜索关键词，placeholder 设置提示文字。

<vd-search v-model="search" placeholder="请输入搜索关键词" />

const search = ref('');

不展示边框

通过 borderless 属性设置不展示边框。

<vd-search v-model="search" placeholder="请输入搜索关键词" borderless />

const search = ref('');

自定义搜索图标

通过 icon 属性设置搜索图标。

<vd-search v-model="search" placeholder="请输入搜索关键词" icon="search" />

const search = ref('');

展示搜索按钮

通过 show-action 属性设置展示搜索按钮，action 属性设置点击搜索按钮的回调函数，支持 Promise，自动设置搜索 加载中 状态。

<vd-search
  v-model="search"
  placeholder="请输入搜索关键词"
  :show-action="true"
  :action="handleSearch"
/>

import { timeout } from '@vital-design/shared';

const search = ref('');

async function handleSearch(value: string) {
  await timeout(1000);// 模拟 1000ms 请求

  console.log(`搜索完成：${value}`);
}

禁用状态

通过 disabled 属性设置禁用状态，禁用状态下无法进行搜索。

<vd-search v-model="search" placeholder="请输入搜索关键词" disabled />

const search = ref('');

API

Props

参数	说明	类型	默认值
v-model	选中值	string | number	-
icon	搜索图标	IconsName	'search'
borderless	是否不显示内边框	boolean	false
placeholder	输入框为空时的占位符	boolean	-
placeholder-class	占位符类名	ClassValue	-
placeholder-style	占位符样式	StyleValue	-
maxlength	限制最长输入字符，设置为 -1 时不限制最大长度	string | number	-1
clearable	是否显示清空按钮	boolean	true
show-icon	是否展示搜索图标	boolean	true
show-action	是否展示搜索按钮	boolean	false
action	点击搜索按钮的回调函数	(value: string) => void | Promise<void>	-
action-text	搜索操作按钮的文字	string	-
disabled	是否禁用	boolean	false
focus	是否获得焦点	boolean	false
autofocus	是否自动获得焦点，iOS 系统不支持该属性	boolean	false
search-on-clear	是否在清空操作时触发搜索	boolean	false
search-on-confirm	是否在确认操作时触发搜索	boolean	true

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
click-left	点击左侧时触发	MouseEvent
click-right	点击右侧时触发	MouseEvent
click-icon	点击搜索图标时触发	MouseEvent
click-action	点击搜索按钮时触发	MouseEvent
clear	清空时触发	-
change	输入值变化时触发	string
search	搜索时触发	string
focus	获得焦点时触发	InputOnFocusEvent
blur	失去焦点时触发	InputOnBlurEvent
input	输入时触发	InputOnInputEvent
confirm	确认时触发	InputOnConfirmEvent

Slots

名称	说明
left	左侧操作
right	右侧操作
icon	搜索图标
clear	清空按钮
action	搜索按钮