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.
117 lines
2.2 KiB
117 lines
2.2 KiB
<template>
|
|
<view class="search-input-container">
|
|
<view class="search-box">
|
|
<view class="search-icon" @click="handleSearch">
|
|
<uv-icon name="search" size="20"></uv-icon>
|
|
</view>
|
|
<input
|
|
class="search-input"
|
|
type="text"
|
|
:placeholder="placeholder"
|
|
v-model="inputValue"
|
|
@input="handleInput"
|
|
@confirm="handleSearch"
|
|
/>
|
|
|
|
<text class="search-text" v-if="showSearchButton" @click="handleSearch">{{ searchButtonText }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'SearchInput',
|
|
props: {
|
|
placeholder: {
|
|
type: String,
|
|
default: '请输入搜索内容'
|
|
},
|
|
showSearchButton: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
searchButtonText: {
|
|
type: String,
|
|
default: '搜索'
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
inputValue: this.value
|
|
}
|
|
},
|
|
watch: {
|
|
value(newVal) {
|
|
this.inputValue = newVal
|
|
},
|
|
inputValue(newVal) {
|
|
this.$emit('input', newVal)
|
|
}
|
|
},
|
|
methods: {
|
|
handleInput(e) {
|
|
this.inputValue = e.detail.value || e.target.value
|
|
this.$emit('input', this.inputValue)
|
|
},
|
|
handleSearch() {
|
|
// console.log('搜索的数值为', this.inputValue);
|
|
this.$emit('search', this.inputValue)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.search-input-container {
|
|
padding: 20rpx 30rpx;
|
|
}
|
|
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border-radius: 37rpx;
|
|
box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
|
|
padding: 0 19rpx 0 29rpx;
|
|
height: 79rpx;
|
|
|
|
// transition: border-color 0.3s ease;
|
|
|
|
// &:focus-within {
|
|
// border: 1rpx solid $primary-color;
|
|
// border-color: #c70019;
|
|
// }
|
|
}
|
|
|
|
.search-icon {
|
|
margin-right: 7rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
border: none;
|
|
outline: none;
|
|
background: transparent;
|
|
font-size: 28rpx;
|
|
color: $secondary-text-color;
|
|
height: 100%;
|
|
|
|
&::placeholder {
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
|
|
.search-text {
|
|
color: $primary-color;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
</style>
|