81 lines
2.6 KiB
Markdown
81 lines
2.6 KiB
Markdown
# 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>` 部分。
|
||
|
||
---
|
||
如有更多需求，欢迎扩展！ |