Search 搜索

文档: https://vant-contrib.gitee.io/vant/#/zh-CN/search

提供搜索的样式, 以及数据的绑定, 事件的触发. 逻辑上只是样式为搜索样式的输入框 (Field).

基本用法:

<van-search v-model="searchText" placeholder="..." @search="search" @cancel="cancel">
</van-search>

const searchText = ref<string>()
const search = (search: string) => {}
const cancel = () => {}

常用属性:

• show-action 控制右侧显示动作按钮.
• label 左侧文本.
• name 作为表单提交时的标识符.
• clearable 可清除.
• show-action 在右侧显示取消按钮, action-text 取消按钮文本.
• autocomplete 置为 "off"

常用插槽:

• left
• label
• left-icon
• action
• right-icon

<van-search show-action>
  <template #left>left</template>
  <template #action>action</template>
  <template #label>label</template>
  <template #left-icon>left-icon</template>
  <template #right-icon>right-icon</template>
</van-search>

需要注意的是, 在外层包裹 form 标签 (不是 van-form), 并且 action 不为空, 在 iOS 上输入显示搜索图标.

<form action="/">
  <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
  />
</form>