vant/src/search

Search

Install

import { createApp } from 'vue';
import { Search } from 'vant';

const app = createApp();
app.use(Search);

Usage

Basic Usage

<van-search v-model="value" placeholder="Placeholder" />

import { ref } from 'vue';

export default {
  setup() {
    const value = ref('');
    return { value };
  },
};

Listen to Events

search event will be Emitted when click the search button on the keyboard, cancel event will be Emitted when click the cancel button.

<form action="/">
  <van-search
    v-model="value"
    show-action
    placeholder="Placeholder"
    @search="onSearch"
    @cancel="onCancel"
  />
</form>

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const value = ref('');
    const onSearch = (val) => Toast(val);
    const onCancel = () => Toast('Cancel');
    return {
      value,
      onSearch,
      onCancel,
    };
  },
};

Tips: There will be a search button on the keyboard when Search is inside a form in iOS.

Input Align

<van-search v-model="value" input-align="center" placeholder="Placeholder" />

Disabled

<van-search v-model="value" disabled placeholder="Placeholder" />

Custom Background Color

<van-search
  v-model="value"
  shape="round"
  background="#4fc08d"
  placeholder="Placeholder"
/>

Custom Action Button

Use action slot to custom right button, cancel event will no longer be Emitted when use this slot.

<van-search
  v-model="value"
  show-action
  label="Address"
  placeholder="Placeholder"
  @search="onSearch"
>
  <template #action>
    <div @click="onSearch">Search</div>
  </template>
</van-search>

API

Props

Attribute	Description	Type	Default
label	Left side label	string	-
shape	Shape of field, can be set to round	string	square
background	Background color of field	string	#f2f2f2
maxlength	Max length of value	number | string	-
placeholder	Placeholder	string	-
clearable	Whether to be clearable	boolean	true
clear-trigger	When to display the clear icon, always means to display the icon when value is not empty, focus means to display the icon when input is focused	string	focus
autofocus	Whether to auto focus, unsupported in iOS	boolean	false
show-action	Whether to show right action button	boolean	false
action-text	Text of action button	boolean	Cancel
disabled	Whether to disable field	boolean	false
readonly	Whether to be readonly	boolean	false
error	Whether to show error info	boolean	false
input-align	Text align of field, can be set to center right	string	left
left-icon	Left icon name	string	search
right-icon	Right icon name	string	-

Events

Event	Description	Arguments
search	Emitted when confirming search	value: string
update:model-value	Emitted when input value changed	value: string
focus	Emitted when input is focused	event: Event
blur	Emitted when input is blured	event: Event
clear	Emitted when the clear icon is clicked	event: Event
cancel	Emitted when the cancel button is clicked	-

Methods

Use ref to get Search instance and call instance methods.

Name	Description	Attribute	Return value
focus	Trigger input focus	-	-
blur	Trigger input blur	-	-

Slots

Name	Description
left	Custom left side content
action	Custom right button, displayed when show-action is true
label	Custom Search label
left-icon	Custom left icon
right-icon	Custom right icon

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@search-padding	10px @padding-sm	-
@search-background-color	@white	-
@search-content-background-color	@gray-1	-
@search-input-height	34px	-
@search-label-padding	0 5px	-
@search-label-color	@text-color	-
@search-label-font-size	@font-size-md	-
@search-left-icon-color	@gray-6	-
@search-action-padding	0 @padding-xs	-
@search-action-text-color	@text-color	-
@search-action-font-size	@font-size-md	-