搜索组件 (c-search)

搜索组件提供了一个样式美观的搜索输入框，包含输入区域和搜索按钮，适用于各种搜索场景。组件支持双向绑定和自定义占位符文本。

基本用法

<template>
  <view>
    <c-search :value.sync="searchText" @search="onSearch"></c-search>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchText: ''
    }
  },
  methods: {
    onSearch() {
      // 处理搜索逻辑
      console.log('搜索内容:', this.searchText);
    }
  }
}
</script>

自定义占位符

<template>
  <view>
    <c-search :value.sync="searchText" placeholder="请输入商品名称" @search="onSearch"></c-search>
  </view>
</template>

属性说明

属性名	类型	默认值	说明
value	String	''	搜索框的值，支持 .sync 修饰符进行双向绑定
placeholder	String	'搜索'	搜索框的占位提示文字

事件说明

事件名	说明	回调参数
update:value	输入框内容变化时触发	输入框当前值
search	点击搜索按钮时触发	无

组件样式

搜索组件采用了简洁现代的设计风格：

1. 输入框和搜索按钮集成在一个容器内
2. 整体采用圆角设计（40rpx），边框颜色为 #04385F
3. 搜索按钮使用渐变背景色：从 #03375E 到 #0A768E
4. 组件整体宽度为 686rpx，高度为 72rpx
5. 搜索图标使用 /static/componentsImage/search.png 图片资源

注意事项

1. 组件内部使用了 uview 的 u--input 组件，请确保项目中已引入 uview UI 库
2. 搜索按钮点击时会同时触发 update:value 和 search 事件
3. 使用 .sync 修饰符可以简化双向绑定的代码
4. 如需修改搜索图标，请替换 /static/componentsImage/search.png 文件
5. 组件尺寸和样式都是通过 rpx 单位定义的，可以自适应不同屏幕尺寸