May 07, 2021 Vant
import Vue from 'vue';
import { Search } from 'vant';
Vue.use(Search);
v-model controls the text in the search box, and background customizes the background color outside the search box
<van-search v-model="value" placeholder="请输入搜索关键词" />
The Search component provides search andancel events, which are triggered when the search/carriage return button is clicked on the keyboard, and cancel events are triggered when the cancel button on the right side of the search box is clicked
<form action="/">
<van-search
v-model="value"
show-action
placeholder="请输入搜索关键词"
@search="onSearch"
@cancel="onCancel"
/>
</form>
import { Toast } from 'vant';
export default {
data() {
return {
value: ''
};
},
methods: {
onSearch(val) {
Toast(val);
},
onCancel() {
Toast('取消');
}
}
}
Tips: Add a form label to the van-search outer layer, and if the action is not empty, the search button can be displayed in the iOS input method
Set the alignment of the contents of the search box with the input-align property, with optional values center and right
<van-search
v-model="value"
placeholder="请输入搜索关键词"
input-align="center"
/>
Disable the search box with the disabled property
<van-search
v-model="value"
disabled
placeholder="请输入搜索关键词"
/>
The background property allows you to set the background color outside the search box, and the shape of the search box is set by the sharp property, with an optional value of round
<van-search
v-model="value"
shape="round"
background="#4fc08d"
placeholder="请输入搜索关键词"
/>
Use the action slot to customize the contents of the right button. When the slot is used, the cancel event is no longer triggered
<van-search
v-model="value"
show-action
placeholder="请输入搜索关键词"
@search="onSearch"
>
<div slot="action" @click="onSearch">搜索</div>
</van-search>
Parameters | Description | Type | The default |
---|---|---|---|
label | The text on the left side of the search box | string | - |
shape |
Search for box shapes, with an optional value
round
|
string |
square
|
background | Search for the background color outside the box | string |
#f2f2f2
|
maxlength | The maximum number of characters entered | number | string | - |
placeholder | The placeholder prompt text | string | - |
clearable | Whether to enable the purge control | boolean |
true
|
autofocus | Whether autofocus or not, the iOS system does not support this property | boolean |
false
|
show-action | Whether to display the cancel button on the right side of the search box | boolean |
false
|
action-text
v2.2.2
|
Cancel the button text | boolean |
取消
|
disabled | Whether to disable the input box | boolean |
false
|
readonly | Whether to make the input box read-only | boolean |
false
|
error | Whether to mark the input red | boolean |
false
|
input-align |
Enter the box content alignment, with the optional value
center
right
|
string |
left
|
left-icon | Enter the icon name or picture link on the left side of the box | string |
search
|
right-icon | Enter the icon name or picture link to the right of the box | string | - |
The name of the event | Description | Callback parameters |
---|---|---|
search | Determines the trigger when searching | Value: Enter the current value of the box |
input | Triggered when the contents of the input box change | Value: Enter the current value of the box |
focus | Triggered when the input box gets focus | event: Event |
blur | Triggered when the input box loses focus | event: Event |
clear | Trigger when you click the clear button | event: Event |
cancel | Triggered when the cancel button is clicked | - |
Name | Description |
---|---|
label | Customize the text on the left side of the search box |
action |
Customize the button on the right side of the search box and
show-action
property
|
left-icon | The icon on the left side of the custom input box |
right-icon | Customize the icon to the right of the input box |