50 lines
1.1 KiB
Vue
50 lines
1.1 KiB
Vue
<template>
|
|
<div class="search-container">
|
|
<el-input v-if="expanded" ref="inputRef"
|
|
v-model="searchText" placeholder="搜索菜友菜谱"
|
|
style="width: 200px;"
|
|
show-word-limit :maxlength="10" clearable
|
|
@keyup.enter="handleSearch" @blur="handleBlur"
|
|
/>
|
|
|
|
<el-button v-else :icon="Search"
|
|
circle size="small" @click="expandSearch"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, nextTick } from 'vue'
|
|
import { Search } from '@element-plus/icons-vue'
|
|
|
|
const expanded = ref(false)
|
|
const searchText = ref('')
|
|
const inputRef = ref(null)
|
|
|
|
// 展开搜索框
|
|
const expandSearch = () => {
|
|
expanded.value = true
|
|
// 等待DOM更新后自动聚焦输入框
|
|
nextTick(() => {
|
|
inputRef.value?.focus()
|
|
})
|
|
}
|
|
|
|
// 处理搜索
|
|
const handleSearch = () => {
|
|
if (searchText.value.trim()) {
|
|
console.log('搜索内容:', searchText.value)
|
|
// 这里可以触发搜索逻辑
|
|
}
|
|
}
|
|
|
|
// 输入框失去焦点时的处理
|
|
const handleBlur = () => {
|
|
if (!searchText.value.trim()) {
|
|
expanded.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
</style>
|