buddhism/components/search-box

SearchBox 搜索框组件

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

功能特性

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

基本用法

<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> 部分。

---

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