@tanzhenxing/zx-search-bar NPM

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 组件。

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

zx-search-bar 搜索栏搜索搜索组件搜索组件

@tanzhenxing/zx-icon @tanzhenxing/zx-input

1 month ago

1 month ago

1 month ago

2 months ago