更新记录

1.0.0（2025-08-15） 下载此版本

first commit

平台兼容性

uni-app x(4.66)

xudy-search-bar

一个基于UniApp的搜索框组件，具有搜索图标、输入框和清除按钮。

功能特性

• 放大镜搜索图标
• 可输入的搜索框
• 清除按钮
• 支持多种事件回调

属性 (Props)

事件 (Events)

方法 (Methods)

使用示例

<template>
  <view>
    <xudy-search-bar 
      v-model="searchValue" 
      :focus="true"
      @confirm="handleSearch"
      @blur="handleBlur"
      @focus="handleFocus"
      @input="handleInput"
      @cancel="handleCancel"
      @clear="handleClear"
    />
  </view>
</template>

<script setup>

const searchValue = ref('')

const handleSearch = (event) => {
  console.log('搜索内容:', searchValue.value)
}

const handleBlur = (event) => {
  console.log('失去焦点')
}

const handleFocus = (event) => {
  console.log('获得焦点')
}

const handleInput = (event) => {
  console.log('输入内容变化')
}

const handleCancel = (value) => {
  console.log('取消搜索')
}

const handleClear = (value) => {
  console.log('清除内容')
}
</script>

组件结构

组件由三部分组成：

1. 左侧搜索图标 (使用uni-icons组件)
2. 中间输入框
3. 右侧清除按钮 (当有输入内容时显示)

样式说明

组件使用了简单的flex布局，具有默认的边框和圆角样式，可以根据需要通过外部CSS类进行自定义。