feat: 搜索框支持切换展开/收起状态

This commit is contained in:
ZiuChen 2022-09-04 19:46:44 +08:00
parent 7cc7f9c763
commit d90d455d4a
3 changed files with 31 additions and 4 deletions

View File

@ -187,7 +187,13 @@ db.init()
const remove = (item) => db.removeItemViaId(item.id)
const focus = () => document.querySelector('.clip-search input')?.focus()
const select = () => document.querySelector('.clip-search input').select()
const focus = () => {
document.querySelector('.clip-search-input').style.display !== 'none'
? document.querySelector('.clip-search-input')?.focus()
: (document.querySelector('.clip-search-btn')?.click(),
document.querySelector('.clip-search-input')?.focus())
}
const toTop = () => (document.scrollingElement.scrollTop = 0)
const resetNav = () => document.querySelectorAll('.clip-switch-item')[0]?.click()
@ -224,8 +230,8 @@ utools.onPluginEnter(() => {
db.addItem(item)
})
}
document.querySelector('.clip-search input').select() // 进入插件将搜索框内容全选
focus()
select() // 进入插件将搜索框内容全选
toTop()
resetNav()
})

View File

@ -1,6 +1,12 @@
<template>
<div class="clip-search">
<span class="clip-search-btn" v-show="!filterText && !isFocus" @click="toggleFocusStatus(true)"
>🔍</span
>
<input
class="clip-search-input"
@focusout="toggleFocusStatus(false)"
v-show="filterText || isFocus"
v-model="filterText"
type="text"
:placeholder="itemCount ? `🔍 在${itemCount}条历史中检索...` : '🔍 检索剪贴板历史...'"
@ -10,7 +16,7 @@
</template>
<script setup>
import { ref, watch } from 'vue'
import { ref, watch, nextTick } from 'vue'
const props = defineProps({
modelValue: {
type: String,
@ -20,6 +26,11 @@ const props = defineProps({
type: Number
}
})
const isFocus = ref(true)
const toggleFocusStatus = (status) =>
status ? ((isFocus.value = status), nextTick(() => window.focus())) : (isFocus.value = status)
const filterText = ref('')
const emit = defineEmits(['update:modelValue'])
// filterText modelValue

View File

@ -1,6 +1,16 @@
.clip-search {
display: flex;
align-items: center;
justify-content: flex-end;
min-width: 300px;
input {
margin-right: 10px;
.clip-search-btn {
width: 25px;
height: 25px;
padding: 10px;
cursor: pointer;
}
.clip-search-input {
width: 90%;
/* normalize */
background: none;