refactor: 简化Main内逻辑

This commit is contained in:
ZiuChen
2022-09-17 20:51:30 +08:00
parent d2770cdeaa
commit ec32d3488b
2 changed files with 15 additions and 14 deletions

View File

@@ -29,6 +29,7 @@ const emit = defineEmits(['update:modelValue', 'onPanelHide'])
watch(filterText, (val) => emit('update:modelValue', val)) watch(filterText, (val) => emit('update:modelValue', val))
const handleFocusOut = () => { const handleFocusOut = () => {
// 失去焦点时 如果没有输入内容 则隐藏输入框
if (!filterText.value) { if (!filterText.value) {
emit('onPanelHide') emit('onPanelHide')
} }

View File

@@ -20,7 +20,7 @@
<span class="clip-switch-btn" v-show="isMultiple" @click="handleMultiCopyBtnClick(true)" <span class="clip-switch-btn" v-show="isMultiple" @click="handleMultiCopyBtnClick(true)"
>📑 粘贴</span >📑 粘贴</span
> >
<span class="clip-switch-btn" @click="handleMultiBtnClick">{{ <span class="clip-switch-btn" @click="isMultiple = !isMultiple">{{
isMultiple ? ' 退出多选' : '👆' isMultiple ? ' 退出多选' : '👆'
}}</span> }}</span>
<span <span
@@ -46,7 +46,7 @@
:showList="showList" :showList="showList"
:fullData="fullData" :fullData="fullData"
:isMultiple="isMultiple" :isMultiple="isMultiple"
:currentActiveTab="outSideActiveTab" :currentActiveTab="activeTab"
@onMultiCopyExecute="handleMultiCopyBtnClick" @onMultiCopyExecute="handleMultiCopyBtnClick"
@onDataChange="toggleFullData" @onDataChange="toggleFullData"
@onDataRemove="handleDataRemove" @onDataRemove="handleDataRemove"
@@ -71,10 +71,6 @@ notifyShown.value = storageNotify ? storageNotify.version < notify.version : tru
const isMultiple = ref(false) const isMultiple = ref(false)
const handleMultiBtnClick = () => {
isMultiple.value = !isMultiple.value
}
const isSearchPanelExpand = ref(false) const isSearchPanelExpand = ref(false)
const handleSearchBtnClick = () => { const handleSearchBtnClick = () => {
@@ -165,8 +161,7 @@ const updateShowList = (type) => {
const restoreDataBase = () => { const restoreDataBase = () => {
// 清空数据库 // 清空数据库
const flag = window.confirm('确定要清空剪贴板记录吗?') if (window.confirm('确定要清空剪贴板记录吗?')) {
if (flag) {
window.db.emptyDataBase() window.db.emptyDataBase()
updateShowList('all') updateShowList('all')
} }
@@ -193,17 +188,22 @@ const handleDataRemove = () => {
updateShowList(ClipSwitchRef.value.activeTab) updateShowList(ClipSwitchRef.value.activeTab)
} }
const outSideActiveTab = ref('all') const activeTab = ref('all')
onMounted(() => { onMounted(() => {
// 获取挂载的导航组件 Ref // 获取挂载的导航组件 Ref
const activeTab = computed(() => ClipSwitchRef.value.activeTab)
const toggleNav = ClipSwitchRef.value.toggleNav const toggleNav = ClipSwitchRef.value.toggleNav
const tabs = ClipSwitchRef.value.tabs const tabs = ClipSwitchRef.value.tabs
watch(activeTab, (val) => (outSideActiveTab.value = val)) watch(
() => ClipSwitchRef.value.activeTab,
(newVal) => {
activeTab.value = newVal
updateShowList(newVal)
}
)
// 已选择的条数 // 多选已选择的条数
selectCount.value = computed(() => ClipItemListRef.value?.selectItemList?.length) selectCount.value = computed(() => ClipItemListRef.value?.selectItemList?.length)
// 初始化数据 // 初始化数据
@@ -278,7 +278,7 @@ onMounted(() => {
e.stopPropagation() e.stopPropagation()
} else if (isMultiple.value) { } else if (isMultiple.value) {
// 退出多选状态 // 退出多选状态
handleMultiBtnClick() isMultiple.value = !isMultiple.value
} else { } else {
// 无上述情况 执行默认: 隐藏uTools主窗口 // 无上述情况 执行默认: 隐藏uTools主窗口
} }
@@ -286,7 +286,7 @@ onMounted(() => {
// Shift: 多选操作 // Shift: 多选操作
if (!isSearchPanelExpand.value) { if (!isSearchPanelExpand.value) {
if (!isMultiple.value) { if (!isMultiple.value) {
handleMultiBtnClick() isMultiple.value = !isMultiple.value
} }
} }
} else if (isArrow || isEnter) { } else if (isArrow || isEnter) {