Search 搜索

引入

  1. import{Search}from'vant';
  2. Vue.use(Search);

代码演示

基础用法

van-search 中,v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。

  1. <van-searchplaceholder="请输入搜索关键词"v-model="value"/>

监听对应事件

van-search 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的 搜索/回车 按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发

Tips: 在 van-search 外层增加 form 标签,并且 action 不为空,即可在 IOS 弹出的输入法中显示搜索按钮

  1. <formaction="/">
  2. <van-search
  3. v-model="value"
  4. placeholder="请输入搜索关键词"
  5. show-action
  6. @search="onSearch"
  7. @cancel="onCancel"
  8. />
  9. </form>

自定义行动按钮

van-search 支持自定义右侧取消按钮,使用名字为 action 的插槽即可。使用此插槽以后,原有的 cancel 事件不再生效。

  1. <van-search
  2. v-model="value"
  3. placeholder="请输入搜索关键词"
  4. show-action
  5. shape="round"
  6. @search="onSearch"
  7. >
  8. <divslot="action" @click="onSearch">搜索</div>
  9. </van-search>

API

Props

Search 默认支持 Input 标签所有的原生属性,比如 maxlengthplaceholderautofocus

参数说明类型默认值版本
label搜索框左侧文本String-1.6.6
shape形状,可选值为 roundStringsquare1.6.6
background搜索框背景色String#f2f2f2-
clearable是否启用清除控件Booleantrue2.0.0
show-action是否在搜索框右侧显示取消按钮Booleanfalse-
disabled是否禁用输入框Booleanfalse-
readonly是否将输入框设为只读Booleanfalse-
error是否将输入内容标红Booleanfalse-
input-align输入框内容对齐方式,可选值为 centerrightStringleft-
left-icon输入框左侧图标名称或图片链接,可选值见 Icon 组件Stringsearch2.0.0
right-icon输入框右侧图标名称或图片链接,可选值见 Icon 组件String-2.0.0

Events

Search 默认支持 Input 标签所有的原生事件,如 focusblurkeypress

事件名说明回调参数
cancel取消搜索-
search确定搜索-
clear点击清除按钮后触发-

Slots

名称说明
label自定义搜索框左侧文本
action自定义搜索框右侧按钮,需要在showAction为 true 时才会显示
left-icon自定义输入框左侧图标
right-icon自定义输入框右侧图标

Search 搜索 - 图1