搜索组件

1. 原生搜索组件实现

使用 uniapp 原生的 input 组件实现搜索功能，可以更好地适配不同平台：

<template>
  <view class="search-container">
    <!-- 搜索框 -->
    <view class="search-box">
      <input 
        class="search-input" 
        type="text" 
        v-model="searchValue" 
        placeholder="请输入搜索关键词" 
        confirm-type="search"
        @confirm="onSearch"
        @input="onInput"
      />
      <text v-if="searchValue" class="clear-icon" @click="clearSearch">×</text>
    </view>
    
    <!-- 取消按钮 -->
    <text class="cancel-btn" @click="onCancel">取消</text>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue';

const searchValue = ref('');
const emit = defineEmits(['search', 'cancel', 'input']);

// 搜索事件
const onSearch = () => {
  emit('search', searchValue.value);
};

// 输入事件
const onInput = (e) => {
  emit('input', e.detail.value);
};

// 清除搜索内容
const clearSearch = () => {
  searchValue.value = '';
  emit('input', '');
};

// 取消搜索
const onCancel = () => {
  emit('cancel');
};
</script>

<style scoped>
.search-container {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #f5f5f5;
}

.search-box {
  flex: 1;
  position: relative;
  background-color: #fff;
  border-radius: 4px;
  padding: 8px 12px;
}

.search-input {
  width: 100%;
  font-size: 14px;
  border: none;
  outline: none;
}

.clear-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  background-color: #ccc;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
}

.cancel-btn {
  margin-left: 10px;
  font-size: 14px;
  color: #333;
}
</style>

2. van-search 组件

Props：

参数	说明	类型	默认值
v-model	当前输入的值	number/string	-
label	搜索框左侧文本	string	-
name	名称，作为提交表单时的标识符	string	-
shape	搜索框形状，可选值为 round	string	square
id	搜索框 id，同时会设置 label 的 for 属性	string	van-search-n-input
background	搜索框外部背景色	string	#f2f2f2
maxlength	输入的最大字符数	number/string	-
placeholder	占位提示文字	string	-
clearable	是否启用清除图标，点击清除图标后会清空输入框	boolean	true
clear-icon	清除图标名称或图片链接，等同于 Icon 组件的 name 属性	string	clear
clear-trigger	显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示	string	focus
autofocus	是否自动聚焦，iOS 系统不支持该属性	boolean	false
show-action	是否在搜索框右侧显示取消按钮	boolean	false
action-text	取消按钮文字	string	取消
disabled	是否禁用输入框	boolean	false
readonly	是否将输入框设为只读状态，只读状态下无法输入内容	boolean	false
error	是否将输入内容标红	boolean	false
error-message	底部错误提示文案，为空时不展示	string	-
formatter	输入内容格式化函数	(val: string) => string	-
format-trigger	格式化函数触发的时机，可选值为 onBlur	string	onChange
input-align	输入框内容对齐方式，可选值为 center right	string	left
left-icon	输入框左侧图标名称或图片链接，等同于 Icon 组件的 name 属性	string	search
right-icon	输入框右侧图标名称或图片链接，等同于 Icon 组件的 name 属性	string	-
autocomplete	input 标签原生的自动完成属性	string	-

2. van-search 组件

Events:

事件名	说明	回调参数
search	确定搜索时触发	value: string (当前输入的值)
update:model-value	输入框内容变化时触发	value: string (当前输入的值)
focus	输入框获得焦点时触发	event: Event
blur	输入框失去焦点时触发	event: Event
click-input	点击输入区域时触发	event: MouseEvent
click-left-icon	点击左侧图标时触发	event: MouseEvent
click-right-icon 3.4.0	点击右侧图标时触发	event: MouseEvent
clear	点击清除按钮后触发	event: MouseEvent
cancel	点击取消按钮时触发	-

方法: *通过 ref 可以获取到 Search 实例并调用实例方法，详见组件实例方法。

方法名	说明	参数	返回值
focus	获取输入框焦点	-	-
blur	取消输入框焦点	-	-

基本使用

• v-model 用于控制搜索框中的文字

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

事件监听

• Search 组件提供了 search 和 cancel 事件，search 事件在点击键盘上的搜索/回车按钮后触发，cancel 事件在点击搜索框右侧取消按钮时触发。

<van-search
  v-model="value"
  show-action
  placeholder="请输入搜索关键词"
  @search="onSearch"
  @cancel="onCancel"
/>
export default { setup() { const value = ref(''); const onSearch = (val) =>
showToast(val); const onCancel = () => showToast('取消'); return { value,
onSearch, onCancel, }; }, };

搜索框内容对齐

• 通过 input-align 属性设置搜索框内容的对齐方式，可选值为 center、right。

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

禁用搜索框

• 通过 disabled 属性禁用搜索框。

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

自定义背景色

• 通过 background 属性可以设置搜索框外部的背景色，通过 shape 属性设置搜索框的形状，可选值为 round。

<van-search
  v-model="value"
  shape="round"
  background="#4fc08d"
  placeholder="请输入搜索关键词"
/>

自定义按钮

• 使用 action 插槽可以自定义右侧按钮的内容。使用插槽后，cancel 事件将不再触发。

<van-search
  v-model="value"
  show-action
  label="地址"
  placeholder="请输入搜索关键词"
  @search="onSearch"
>
  <template #action>
    <div @click="onClickButton">搜索</div>
  </template>
</van-search>
export default { setup() { const value = ref(''); const onSearch = (val) =>
showToast(val); const onClickButton = () => showToast(value.value); return {
value, onSearch, onClickButton, }; }, };