99 lines
1.7 KiB
Vue
99 lines
1.7 KiB
Vue
<script>
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
localValue: this.value,
|
|
isInputFocused: false,
|
|
};
|
|
},
|
|
watch: {
|
|
value(newVal) {
|
|
this.localValue = newVal;
|
|
}
|
|
},
|
|
methods: {
|
|
handleInput(event) {
|
|
const newValue = event.target.value;
|
|
this.localValue = newValue;
|
|
this.$emit('input', newValue);
|
|
},
|
|
// 新增：处理查询事件
|
|
handleSearch() {
|
|
this.$emit('search', this.localValue);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="input-container flex items-center" :class="{ focused: isInputFocused || localValue }">
|
|
<input
|
|
type="text"
|
|
:placeholder="placeholder"
|
|
:value="localValue"
|
|
@input="handleInput"
|
|
@focus="isInputFocused = true"
|
|
@blur="isInputFocused = false"
|
|
@keydown.enter="handleSearch"
|
|
>
|
|
<img
|
|
alt=""
|
|
:src="isInputFocused || localValue ? '/search/home_search_s.png' : '/search/home_search.png'"
|
|
@click="handleSearch"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.input-container {
|
|
height: 60px;
|
|
padding: 10px 20px;
|
|
border-radius: 12px;
|
|
background-color: #fff;
|
|
input {
|
|
outline: none;
|
|
font-size: $normal-font-size;
|
|
transition: border-color 0.3s ease;
|
|
color: #1e293b;
|
|
flex: 1;
|
|
background: #fff !important;
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
box-shadow: none;
|
|
height: 40px;
|
|
|
|
&::placeholder {
|
|
color: #ccc;
|
|
}
|
|
}
|
|
|
|
img {
|
|
position: relative;
|
|
right: 0;
|
|
width: 54px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
&.focused {
|
|
background:
|
|
linear-gradient(white, white) padding-box,
|
|
linear-gradient(90deg, $linear-gradient-start 22%, $linear-gradient-end 73%) border-box;
|
|
border-radius: 12px;
|
|
border: 1px solid transparent;
|
|
}
|
|
}
|
|
</style>
|