<think>
我们正在讨论
Vant 2中的van-search组件。根据用户要求，我们需要提供搜索功能的使用方法和示例。
注意：用户要求的是
Vant 2（对应
Vue2）的使用方法，因此我们主要参考引用[1]的内容（因为引用[1]是关于
vue2-
vant的），同时引用[2]中关于van-search的一些坑也可以作为注意事项。
主要功能点：
1. 绑定搜索关键词（v-model）
2. 触发搜索事件（@search）
3. 自动获取焦点（通过ref操作DOM）
4. 清空事件（@clear）
5. 右侧
图标事件（@click-right-icon）等
我们将按照以下结构回答：
1. 基本用法（绑定数据、触发搜索）
2. 自动获取焦点的方法（在
Vue2中）
3. 事件处理（搜索事件、清空事件、右侧
图标事件）及注意事项（如引用[2]提到的坑）
4. 提供一个综合示例
注意：由于用户要求的是
Vant2，所以我们使用
Vue2的语法。
</think>
以下是关于
Vant 2 中 `van-search` 组件搜索功能的详细介绍和使用方法，包含关键配置和示例代码：
### 一、核心功能及使用方法
1. **数据绑定**
使用 `v-model` 双向绑定搜索关键词：
```
vue
<van-search v-model.trim="keyword" placeholder="请输入关键词" />
```
`v-model.trim` 自动去除输入内容的首尾空格。
2. **事件监听**
- `@search`：点击键盘搜索按钮时触发
- `@clear`：点击清空按钮时触发
- `@click-right-icon`：点击右侧
图标时触发
```
vue
<van-search
v-model="keyword"
@search="handleSearch"
@clear="handleClear"
@click-right-icon="handleSearch"
/>
```
3. **触发焦点方法（
Vue2 语法）**
通过 `ref` 获取 DOM 后调用 `focus
()`：
```
vue
<template>
<van-search ref="searchInput" />
<van-tag @click="focusSearch">点击聚焦</van-tag>
</template>
<script>
export default {
methods: {
focusSearch
() {
this.$refs.searchInput.querySelector
('input'
).focus
();
}
}
}
</script>
```
### 二、完整功能示例
```
vue
<template>
<div>
<!-- 搜索组件 -->
<van-search
v-model.trim="keyword"
ref="searchRef"
placeholder="搜索商品"
show-action
clearable
shape="round"
@search="onSearch"
@clear="onClear"
>
<template #action>
<div @click="onSearch">搜索</div>
</template>
</van-search>
<!-- 历史记录 -->
<van-tag
v-for="
(item,index
) in history"
:key="index"
@click="setKeyword
(item
)"
>
{{ item }}
</van-tag>
</div>
</template>
<script>
export default {
data
() {
return {
keyword: '',
history: ['手机', '电脑', '耳机']
};
},
mounted
() {
// 页面加载自动聚焦
this.$nextTick
(() => {
this.$refs.searchRef.querySelector
('input'
).focus
();
}
);
},
methods: {
onSearch
() {
if
(!this.keyword
) return;
console.log
('搜索:', this.keyword
);
// 添加到历史记录
if
(!this.history.includes
(this.keyword
)) {
this.history.unshift
(this.keyword
);
}
},
onClear
() {
console.log
('输入已清空'
);
},
setKeyword
(item
) {
this.keyword = item;
this.onSearch
();
// 历史记录点击后自动聚焦
this.$refs.searchRef.querySelector
('input'
).focus
();
}
}
};
</script>
```
### 三、注意事项
1. **清空按钮冲突问题**
当同时使用 `clearable` 和 `right-icon` 时，点击清空按钮可能意外触发 `@click-right-icon` 事件（引用[2]）。解决方案：
```
vue
<van-search
@clear="handleClear"
@click-right-icon="keyword ? handleSearch
() : null"
/>
```
2. **自动聚焦
失效场景**
在 `
Vue.nextTick
()` 中调用聚焦确保 DOM 已渲染：
```js
this.$nextTick
(() => {
this.$refs.searchRef.querySelector
('input'
).focus
();
}
);
```
3. **移动端键盘控制**
添加 `show-action` 属性可在键盘
显示“搜索”按钮，优化移动端体验。
### 四、常用配置属性
| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| shape | 搜索框形状
(`round`/`square`
) | string | `square` |
| clearable | 是否
显示清空按钮 | boolean | `true` |
| clear-trigger | 清空按钮
显示时机
(`always`/`focus`
) | string | `focus` |
| left-icon | 左侧
图标名称 | string | `search` |
| right-icon | 右侧
图标名称 | string | - |
| background | 搜索框背景色 | string | `#f2f2f2` |
[^1][^2]
本文介绍了一个关于vant图标显示失效的问题及解决办法。原因是图标字体引用的在线文件未能正确加载。解决方式是在main.js中引入本地的vant图标文件。
扫一扫
7619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
