You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
226 lines
4.5 KiB
226 lines
4.5 KiB
<template>
|
|
<!-- 自定义搜索框组件 -->
|
|
<view class="search-container" >
|
|
<view class="search-input" :style="{ backgroundColor: bgColor }">
|
|
<!-- 搜索图标 -->
|
|
<view v-if="searchIconAlign === 'left' && showIcon" class="search-icon left" @click="clickIcon">
|
|
<text class="iconfont">🔍</text>
|
|
</view>
|
|
|
|
<view v-if="searchIconAlign === 'center' && showIcon" class="search-icon center" @click="clickIcon">
|
|
<text class="iconfont">🔍</text>
|
|
</view>
|
|
|
|
<input
|
|
:value="value"
|
|
:placeholder="placeholder"
|
|
type="text"
|
|
:disabled="disabled"
|
|
:maxlength="maxLength"
|
|
@input="input"
|
|
@confirm="search"
|
|
@keyup.enter="search"
|
|
class="input-field"
|
|
:style="{
|
|
textAlign: textAlign,
|
|
borderRadius: borderRadius,
|
|
height: height,
|
|
width: width }"
|
|
/>
|
|
|
|
<!-- 清除按钮 -->
|
|
<view v-if="value && !disabled" class="clear-icon" @click="clear">
|
|
<text class="iconfont">✕</text>
|
|
</view>
|
|
|
|
<!-- 搜索图标在右侧 -->
|
|
<view v-if="searchIconAlign === 'right' && showIcon" class="search-icon right" @click="clickIcon">
|
|
<text class="iconfont">🔍</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 取消按钮 -->
|
|
<view v-if="showCancel" class="cancel-btn" @click="cancel">
|
|
<text>取消</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default{
|
|
name:'Search',
|
|
props:{
|
|
placeholder:{
|
|
type:String,
|
|
default:'搜索'
|
|
},
|
|
// 是否展示搜索图标
|
|
showIcon:{
|
|
type:Boolean,
|
|
default:true
|
|
},
|
|
// 是否展示右侧的取消按钮
|
|
showCancel:{
|
|
type:Boolean,
|
|
default:true
|
|
},
|
|
// 搜索图标对齐位置
|
|
searchIconAlign:{
|
|
type:String,
|
|
default:'left'
|
|
},
|
|
// 搜索框内容对齐方式
|
|
textAlign:{
|
|
type:String,
|
|
default:'left'
|
|
},
|
|
// v-model传入的内容怎么用
|
|
value:{
|
|
type:String,
|
|
default:''
|
|
},
|
|
// 搜索框内容改变时触发的事件
|
|
height:{
|
|
type:String,
|
|
default:'60rpx'
|
|
},
|
|
width:{
|
|
type:String,
|
|
default:'100%'
|
|
},
|
|
bgColor:{
|
|
type:String,
|
|
default:'#f3f7f8'
|
|
},
|
|
disabled:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
maxLength:{
|
|
type:Number,
|
|
default:100
|
|
},
|
|
borderRadius:{
|
|
type:String,
|
|
default:'30rpx'
|
|
},
|
|
|
|
},
|
|
methods:{
|
|
clickIcon(){
|
|
console.log('clickIcon');
|
|
this.search()
|
|
|
|
},
|
|
clear(){
|
|
// console.log('clear');
|
|
this.$emit('clear', '')
|
|
this.$emit('input', '')
|
|
},
|
|
search(){
|
|
console.log('search', this.value);
|
|
|
|
this.$emit('search', this.value)
|
|
},
|
|
cancel(){
|
|
// console.log('cancel');
|
|
this.$emit('cancel')
|
|
this.$emit('input', '')
|
|
},
|
|
input(e){
|
|
const value = e.detail.value
|
|
console.log('input', value)
|
|
this.$emit('input', value)
|
|
// this.onChange(value)
|
|
}
|
|
},
|
|
watch:{
|
|
value(newVal){
|
|
console.log(newVal)
|
|
this.$emit('change', newVal)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.search-container {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
// background-color: #fff;
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
// height: 60rpx;
|
|
border-radius: 30rpx;
|
|
padding: 0 20rpx;
|
|
position: relative;
|
|
|
|
.search-icon {
|
|
// flex: 0.1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
|
|
&.left {
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
&.right {
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.iconfont {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.input-field {
|
|
flex: 1;
|
|
padding-left: 4rpx;
|
|
border: none;
|
|
outline: none;
|
|
background: transparent;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
// background-color: #f1f6ff;
|
|
&::placeholder {
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.clear-icon {
|
|
display: flex;
|
|
// align-items: center;
|
|
line-height: 40rpx;
|
|
justify-content: center;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-left: 10rpx;
|
|
border-radius: 50%;
|
|
background: #f0f0f0;
|
|
.iconfont {
|
|
font-size: 20rpx;
|
|
color: #b2b2b2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cancel-btn {
|
|
margin-left: 20rpx;
|
|
padding: 0 20rpx;
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
color: #007aff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|