ContiNew/continew-admin-ui
1
1
Fork 0
mirror of https://github.com/continew-org/continew-admin-ui.git synced 2026-01-13 10:57:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(tabs): 标签页新增重新加载、关闭左侧操作

Browse Source
This commit is contained in:
Charles7c
2024-11-23 21:17:22 +08:00
parent 6c45483fae
commit b030921189
3 changed files with 76 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/layout/components/Main.vue
View File

@@ -3,7 +3,7 @@
<router-view v-slot="{ Component, route }">
<transition :name="appStore.transitionName" mode="out-in" appear>
<keep-alive :include="(tabsStore.cacheList as string[])">
<component :is="Component" :key="route.path" />
<component :is="Component" :key="route.path + String(tabsStore.reloadFlag)" />
</keep-alive>
</transition>
</router-view>

55
src/layout/components/Tabs/index.vue
View File

@@ -20,23 +20,34 @@
<span @contextmenu="(e) => handleContextMenu(e, item.path)">
{{ item.meta?.title }}
</span>
<template #content>
<a-doption @click="reload">
<template #icon>
<icon-refresh class="reload-icon" :class="{ 'reload-icon--spin': loading }" />
</template>
<template #default>重新加载</template>
</a-doption>
<a-doption @click="tabsStore.closeCurrent(currentContextPath)">
<template #icon>
<icon-close />
</template>
<template #default>关闭当前</template>
</a-doption>
<a-doption @click="tabsStore.closeLeft(currentContextPath)">
<template #icon>
<icon-to-left />
</template>
<template #default>关闭左侧</template>
</a-doption>
<a-doption @click="tabsStore.closeRight(currentContextPath)">
<template #icon>
<icon-close />
<icon-to-right />
</template>
<template #default>关闭右侧</template>
</a-doption>
<a-doption @click="tabsStore.closeOther(currentContextPath)">
<template #icon>
<icon-eraser />
<icon-close />
</template>
<template #default>关闭其他</template>
</a-doption>
@@ -58,21 +69,33 @@
</template>
</a-button>
<template #content>
<a-doption @click="reload">
<template #icon>
<icon-refresh class="reload-icon" :class="{ 'reload-icon--spin': loading }" />
</template>
<template #default>重新加载</template>
</a-doption>
<a-doption @click="tabsStore.closeCurrent(route.path)">
<template #icon>
<icon-close />
</template>
<template #default>关闭当前</template>
</a-doption>
<a-doption @click="tabsStore.closeRight(route.path)">
<a-doption @click="tabsStore.closeLeft(currentContextPath)">
<template #icon>
<icon-close />
<icon-to-left />
</template>
<template #default>关闭左侧</template>
</a-doption>
<a-doption @click="tabsStore.closeRight(currentContextPath)">
<template #icon>
<icon-to-right />
</template>
<template #default>关闭右侧</template>
</a-doption>
<a-doption @click="tabsStore.closeOther(route.path)">
<template #icon>
<icon-eraser />
<icon-close />
</template>
<template #default>关闭其他</template>
</a-doption>
@@ -131,6 +154,17 @@ const handleContextMenu = (e: MouseEvent, path: string) => {
e.preventDefault()
currentContextPath.value = path
}
const loading = ref(false)
// 重新加载
const reload = () => {
if (loading.value) return
loading.value = true
tabsStore.reloadPage()
setTimeout(() => {
loading.value = false
}, 600)
}
</script>
<style scoped lang="scss">
@@ -164,4 +198,13 @@ const handleContextMenu = (e: MouseEvent, path: string) => {
background-color: var(--color-bg-1);
position: relative;
}
.reload-icon {
cursor: pointer;
&--spin {
animation-name: arco-loading-circle;
animation-duration: 0.6s;
}
}
</style>