搜索框组件的封装
This commit is contained in:
minimaxagent1
parent
66d08702d4
commit
137bec73ab
81
components/search-box/README.md
Normal file
81
components/search-box/README.md
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
# 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>` 部分。
|
||||
|
||||
---
|
||||
如有更多需求，欢迎扩展！
|
||||
97
components/search-box/search-box.vue
Normal file
97
components/search-box/search-box.vue
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<view class="searchBox" :style="{ width: width }">
|
||||
<image class="search-icon" :src="searchIcon" mode="aspectFit"></image>
|
||||
<input
|
||||
class="search-input"
|
||||
:value="value"
|
||||
@input="onInput"
|
||||
:placeholder="placeholder"
|
||||
placeholder-class="search-placeholder"
|
||||
@confirm="onSearch"
|
||||
confirm-type="search"
|
||||
/>
|
||||
<view class="search-btn" @click="onSearch">{{ btnText }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommonEnum from '@/enum/common.js';
|
||||
export default {
|
||||
name: 'SearchBox',
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '690rpx'
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请输入高僧姓名'
|
||||
},
|
||||
btnText: {
|
||||
type: String,
|
||||
default: '搜索'
|
||||
},
|
||||
// 建议传递 CommonEnum.SEARCH 作为默认图标
|
||||
searchIcon: {
|
||||
type: String,
|
||||
default: () => CommonEnum.SEARCH
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onInput(e) {
|
||||
this.$emit('input', e.detail.value)
|
||||
},
|
||||
onSearch() {
|
||||
this.$emit('search', this.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.searchBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 70rpx;
|
||||
background: #FFFBF5;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #C7A26D;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 0 12rpx;
|
||||
}
|
||||
.search-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin: 0 28rpx;
|
||||
}
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 100%;
|
||||
}
|
||||
.search-placeholder {
|
||||
color: #bfa16b;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.search-btn {
|
||||
background: #bfa16b;
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
border-radius: 6rpx;
|
||||
padding: 0 24rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,7 +3,8 @@ export const CommonEnum = {
|
|||
BACKGROUND: "https://api.ccttiot.com/image-1753769939853.png", //磨砂背景图片
|
||||
RIGHT_CHEVRON:"https://api.ccttiot.com/image-1753773619878.png", //右箭头
|
||||
BACK_BUTTON:"https://api.ccttiot.com/image-1753868358514.png", //导航栏返回按钮
|
||||
BASE_COLOR:"#FAF8F3" //基调颜色
|
||||
BASE_COLOR:"#FAF8F3", //基调颜色
|
||||
SEARCH: "https://api.ccttiot.com/image-1753769500465.png" //通用搜索图标
|
||||
|
||||
};
|
||||
export default CommonEnum;
|
||||
|
|
@ -1,9 +1,6 @@
|
|||
|
||||
export const MonkEnum = {
|
||||
|
||||
SEARCH: "https://api.ccttiot.com/image-1753769500465.png", //返回的按钮图像
|
||||
MONK_IMAGE:"https://api.ccttiot.com/image-1753859218129.png"
|
||||
|
||||
MONK_IMAGE: "https://api.ccttiot.com/image-1753859218129.png"
|
||||
};
|
||||
|
||||
export default MonkEnum;
|
||||
|
|
@ -5,18 +5,14 @@
|
|||
<custom-navbar title="寺庙高僧" />
|
||||
<view class="header">
|
||||
|
||||
<view class='searchBox'>
|
||||
<image class="search-icon" :src="MonkEnum.SEARCH" mode="aspectFit"></image>
|
||||
<input
|
||||
class="search-input"
|
||||
v-model="searchName"
|
||||
placeholder="请输入高僧姓名"
|
||||
placeholder-class="search-placeholder"
|
||||
@confirm="onSearch"
|
||||
confirm-type="search"
|
||||
/>
|
||||
<view class="search-btn" @click="onSearch">搜索</view>
|
||||
</view>
|
||||
<monk-search-box
|
||||
v-model="searchName"
|
||||
:width="'690rpx'"
|
||||
:search-icon="CommonEnum.SEARCH"
|
||||
placeholder="请输入高僧姓名"
|
||||
btn-text="搜索"
|
||||
@search="onSearch"
|
||||
/>
|
||||
<view class="monk-list">
|
||||
<view class="monk-item" v-for="(item, idx) in monkList" :key="item.id">
|
||||
<image class="monk-avatar" :src="item.imgUrl" mode="aspectFill"></image>
|
||||
|
|
@ -44,11 +40,13 @@
|
|||
} from '@/api/monk/monk.js'
|
||||
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
|
||||
import BaseBackground from "../../components/base-background/base-background.vue";
|
||||
import SearchBox from "../../components/search-box/search-box.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CustomNavbar,
|
||||
BaseBackground
|
||||
BaseBackground,
|
||||
MonkSearchBox: SearchBox
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -130,53 +128,6 @@
|
|||
|
||||
|
||||
|
||||
.searchBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 690rpx;
|
||||
height: 70rpx;
|
||||
background: #FFFBF5;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #C7A26D;
|
||||
margin-top: 20rpx; /* 进一步减少顶部间距 */
|
||||
margin-bottom: 20rpx;
|
||||
padding: 0 12rpx;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin: 0 28rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.search-placeholder {
|
||||
color: #bfa16b;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
background: #bfa16b;
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
border-radius: 6rpx;
|
||||
padding: 0 24rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.monk-list {
|
||||
width: 100%;
|
||||
margin-top: 24rpx;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user