attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tabs刷新

Browse Source
This commit is contained in:
wang_fan_w 2024-07-13 21:09:48 +08:00
parent f7c9bb2188
commit 17c5c65208
1 changed files with 39 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,35 +17,36 @@
/> />
</a-tabs> </a-tabs>
<div class="tabs_setting"> <div class="tabs_setting">
<a-dropdown trigger="hover" :popup-max-height="false"> <a-space>
<div class="setting"><icon-apps :size="18" /></div> <a-tooltip :content="$t(`language.refresh`)" position="bottom" mini>
<template #content> <span ref="refreshRef" :class="rotateOpen && 'refresh'"><icon-refresh :size="18" @click="refresh" /></span>
<a-doption @click="refresh"> </a-tooltip>
<template #icon><icon-refresh /></template> <a-dropdown trigger="hover" :popup-max-height="false">
<template #default>{{ $t(`language.refresh`) }}</template> <div class="setting"><icon-apps :size="18" /></div>
</a-doption> <template #content>
<a-doption @click="closeCurrent"> <a-doption @click="closeCurrent">
<template #icon><icon-close /></template> <template #icon><icon-close /></template>
<template #default>{{ $t(`language.close-current`) }}</template> <template #default>{{ $t(`language.close-current`) }}</template>
</a-doption> </a-doption>
<a-doption @click="closeSides('left')"> <a-doption @click="closeSides('left')">
<template #icon><icon-left /></template> <template #icon><icon-left /></template>
<template #default>{{ $t(`language.close-left-side`) }}</template> <template #default>{{ $t(`language.close-left-side`) }}</template>
</a-doption> </a-doption>
<a-doption @click="closeSides('right')"> <a-doption @click="closeSides('right')">
<template #icon><icon-right /></template> <template #icon><icon-right /></template>
<template #default>{{ $t(`language.close-right-side`) }}</template> <template #default>{{ $t(`language.close-right-side`) }}</template>
</a-doption> </a-doption>
<a-doption @click="closeOther('other')"> <a-doption @click="closeOther('other')">
<template #icon><icon-close-circle /></template> <template #icon><icon-close-circle /></template>
<template #default>{{ $t(`language.close-other`) }}</template> <template #default>{{ $t(`language.close-other`) }}</template>
</a-doption> </a-doption>
<a-doption @click="closeOther('all')"> <a-doption @click="closeOther('all')">
<template #icon><icon-folder-delete /></template> <template #icon><icon-folder-delete /></template>
<template #default>{{ $t(`language.close-all`) }}</template> <template #default>{{ $t(`language.close-all`) }}</template>
</a-doption> </a-doption>
</template> </template>
</a-dropdown> </a-dropdown>
</a-space>
</div> </div>
</div> </div>
</template> </template>
@ -78,7 +79,12 @@ const onDelete = (key: string) => {
}; };
// 刷新当前页 // 刷新当前页
const rotateOpen = ref(false);
const refresh = () => { const refresh = () => {
rotateOpen.value = true;
setTimeout(() => {
rotateOpen.value = false;
}, 500);
const themeStore = useThemeConfig(); const themeStore = useThemeConfig();
themeStore.setRefreshPage(false); themeStore.setRefreshPage(false);
currentRoute.value.meta.keepAlive && routerStore.removeRouteName(currentRoute.value.name); currentRoute.value.meta.keepAlive && routerStore.removeRouteName(currentRoute.value.name);
@ -154,6 +160,10 @@ const closeOther = (type: string) => {
margin-right: $margin; margin-right: $margin;
color: $color-text-2; color: $color-text-2;
} }
.refresh {
transition: transform 0.5s;
transform: rotate(360deg);
}
} }
} }
:deep(.arco-tabs-nav-tab) { :deep(.arco-tabs-nav-tab) {