buddhism/components/search-box/README.md

# SearchBox 搜索框组件

一个可复用的搜索框组件，支持自定义宽度、图标、placeholder、按钮文字，支持 v-model 双向绑定和搜索事件，适用于 Vue2/uni-app 项目。

## 功能特性

- 支持 v-model 双向绑定父组件变量
- 支持自定义宽度（width）
- 支持自定义搜索图标（searchIcon，建议直接用 CommonEnum.SEARCH）
- 支持自定义 placeholder
- 支持自定义按钮文字
- 支持点击按钮和回车触发搜索事件
- 样式美观，易于复用

## 基本用法

```vue
<template>
  <search-box
    v-model="searchName"
    :width="'600rpx'"
    :search-icon="CommonEnum.SEARCH"  <!-- 推荐这样写 -->
    placeholder="请输入内容"
    btn-text="查找"
    @search="handleSearch"
  />
</template>

<script>
import SearchBox from '@/components/search-box/search-box.vue'
import CommonEnum from '@/enum/common.js'

export default {
  components: { SearchBox },
  data() {
    return {
      searchName: '',
      CommonEnum
    }
  },
  methods: {
    handleSearch(val) {
      // val 就是当前输入框内容
      console.log('搜索内容：', val)
      // 这里可以发请求等
    }
  }
}
</script>
```

## Props

| 属性名      | 类型   | 默认值            | 说明           |
| ----------- | ------ | ----------------- | -------------- |
| value       | String | ''                | v-model 绑定值 |
| width       | String | '690rpx'          | 搜索框宽度     |
| searchIcon  | String | CommonEnum.SEARCH | 搜索图标地址   |
| placeholder | String | '请输入高僧姓名'  | 输入框占位符   |
| btnText     | String | '搜索'            | 按钮文字       |

## 事件

| 事件名 | 说明                 | 回调参数       |
| ------ | -------------------- | -------------- |
| input  | 输入内容变化时触发   | 当前输入框内容 |
| search | 点击按钮或回车时触发 | 当前输入框内容 |

## 父子通信说明

- v-model 实现父子双向绑定，父组件变量会自动与输入框内容同步。
- 子组件通过 `$emit('input', value)` 通知父组件更新 v-model。
- 子组件通过 `$emit('search', value)` 通知父组件执行搜索。

## 注意事项

1. 组件适用于 Vue2/uni-app，v-model 默认绑定 `value` 和 `@input`。
2. 建议传递合适的 `width`，如 `600rpx`、`690rpx` 等。
3. 搜索图标建议直接用 `CommonEnum.SEARCH`。
4. 可通过监听 `@search` 事件实现自定义搜索逻辑。

## 样式自定义

如需自定义样式，可直接修改组件内的 `<style lang="scss" scoped>` 部分。

---

如有更多需求，欢迎扩展！