zx-search-bar 组件

自定义搜索栏组件，基于 uni-app + vue3 setup 实现，支持 H5、各类小程序、App 平台。参考官方 uni-search-bar 组件，适合商品、文章等内容的搜索场景。

基本用法

<template>
  <zx-search-bar v-model="searchValue" @confirm="onSearch" />
</template>

<script setup>
import { ref } from 'vue'
const searchValue = ref('')
function onSearch(e) {
  // 处理搜索逻辑
  console.log('搜索内容：', e.value)
}
</script>

属性（Props）

| 属性名 | 类型 | 默认值 | 说明 | | -------------- | ---------------- | ---------- | ------------------------------------------------------------ | | modelValue | String/Number | '' | 搜索栏绑定值，支持 v-model | | placeholder | String | 搜索 | 占位符文字 | | radius | Number/String | 5 | 搜索栏圆角，单位 px | | clearButton | String | auto | 清除按钮显示方式：always-一直显示、auto-输入框不为空时显示、none-不显示 | | cancelButton | String | auto | 取消按钮显示方式：always-一直显示、auto-输入框不为空时显示、none-不显示 | | cancelText | String | 取消 | 取消按钮文字 | | bgColor | String | #F8F8F8 | 输入框背景色 | | textColor | String | #000000 | 输入文字颜色 | | maxlength | Number/String | 100 | 最大输入长度 | | focus | Boolean | false | 是否自动聚焦 | | readonly | Boolean | false | 是否只读，展示不可编辑 |

事件（Events）

| 事件名 | 说明 | 返回参数 | | ---------- | ------------------------------------ | ----------------------- | | input | 输入内容变化时触发 | value | | update:modelValue | v-model 双向绑定 | value | | confirm | 点击键盘搜索/回车时触发 | { value } | | clear | 点击清除按钮时触发 | { value } | | cancel | 点击取消按钮时触发 | { value } | | blur | 输入框失去焦点时触发 | { value } | | focus | 输入框获得焦点时触发 | e.detail |

插槽（Slots）

| 插槽名 | 说明 | | ----------- | ---------------- | | searchIcon | 替换搜索图标 | | clearIcon | 替换清除图标 |

完整示例

详见：src/pages/components/search-bar/index.vue

<zx-search-bar
  v-model="searchValue"
  placeholder="请输入关键词"
  :radius="10"
  :clearButton="'auto'"
  :cancelButton="'auto'"
  cancelText="取消"
  bgColor="#f0f0f0"
  textColor="#333"
  :maxlength="50"
  @confirm="onSearch"
  @input="onInput"
  @clear="onClear"
  @cancel="onCancel"
  @blur="onBlur"
  @focus="onFocus"
>
  <template #searchIcon>
    <uni-icons color="#007aff" size="20" type="search" />
  </template>
  <template #clearIcon>
    <uni-icons color="#ff4d4f" size="20" type="closeempty" />
  </template>
</zx-search-bar>

注意事项

• 组件已适配 H5、各类小程序、App 平台。
• 不依赖浏览器特有 DOM。
• 国际化文案可通过 src/components/zx-search-bar/i18n/ 目录自定义。
• 如需自定义图标，建议使用 uni-icons 组件。

如有问题或建议，欢迎反馈。