98 lines
1.8 KiB
Vue
98 lines
1.8 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; // 监听外部 value 变化并同步到本地
|
|
}
|
|
},
|
|
methods: {
|
|
handleInput(event) {
|
|
const newValue = event.target.value;
|
|
this.localValue = newValue;
|
|
this.$emit('input', newValue); // 触发 input 事件以支持 v-model
|
|
},
|
|
// 新增：处理查询事件
|
|
handleSearch() {
|
|
this.$emit('search', this.localValue);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="input-container" :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 {
|
|
position: relative;
|
|
|
|
input {
|
|
width: 100%;
|
|
height: 60px;
|
|
padding: 0 20px;
|
|
border-radius: 12px;
|
|
border: 2px solid transparent;
|
|
outline: none;
|
|
font-size: $normal-font-size;
|
|
transition: border-color 0.3s ease;
|
|
|
|
&::placeholder {
|
|
color: #ccc;
|
|
}
|
|
}
|
|
|
|
img {
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 54px;
|
|
height: 40px;
|
|
pointer-events: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.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>
|