## Search ### Install ``` javascript import { Search } from 'vant'; Vue.component(Search.name, Search); ``` ### Usage #### Basic Usage :::demo Basic Usage ```html ``` ```javascript export default { data() { value: '' } } ``` ::: #### Listen to Events `search` event will be triggered when click the search button on the keyboard. `cancel` event will be triggered when click the cancel button. Tips: There will be a search button on the keyboard when Search is inside a form in iOS. :::demo Listen to Events ```html
``` ::: #### Custom Button Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot :::demo Custom Button ```html
Search
``` ::: ### API | Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| | placeholder | Input placeholder | `String` | - | - | | background | Background color | `String` | `#f2f2f2` | - | | showAction | Whether to show right button | `Boolean` | false | - | ### Event | Event | Description | Attribute | |-----------|-----------|-----------| | cancel | Triggered when click cancel button | - | | search | Triggered when confirm search | - | ### Slot | name | Description | |-----------|-----------| | action | Custom right button, displayed when `showAction` is true |