mirror of
https://github.com/ZiuChen/ClipboardManager.git
synced 2025-06-06 21:34:08 +08:00
feat: 搜索框支持切换展开/收起状态
This commit is contained in:
parent
7cc7f9c763
commit
d90d455d4a
@ -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()
|
||||
})
|
||||
|
@ -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的值
|
||||
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user