Vant Search search

Introduced

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

Vue.use(Search);

Code demo

Basic usage

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="请输入搜索关键词" />

Event monitoring

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

The contents of the search box are aligned

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

Disable the search box with the disabled property

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

Customize the background color

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="请输入搜索关键词"
/>

Custom buttons

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>

Api

Props

Events

Slots