|
|
@@ -9,20 +9,12 @@
|
|
|
>
|
|
|
<div class="tabs-view-main">
|
|
|
<div ref="navWrap" :class="{ 'tabs-card-scrollable': scrollable }" class="tabs-card">
|
|
|
- <span
|
|
|
- :class="{ 'tabs-card-prev-hide': !scrollable }"
|
|
|
- class="tabs-card-prev"
|
|
|
- @click="scrollPrev"
|
|
|
- >
|
|
|
+ <span :class="{ 'tabs-card-prev-hide': !scrollable }" class="tabs-card-prev" @click="scrollPrev">
|
|
|
<el-icon class="el-input__icon" size="16">
|
|
|
<LeftOutlined />
|
|
|
</el-icon>
|
|
|
</span>
|
|
|
- <span
|
|
|
- :class="{ 'tabs-card-next-hide': !scrollable }"
|
|
|
- class="tabs-card-next"
|
|
|
- @click="scrollNext"
|
|
|
- >
|
|
|
+ <span :class="{ 'tabs-card-next-hide': !scrollable }" class="tabs-card-next" @click="scrollNext">
|
|
|
<el-icon class="el-input__icon" size="16">
|
|
|
<RightOutlined />
|
|
|
</el-icon>
|
|
|
@@ -86,20 +78,16 @@
|
|
|
<el-icon class="el-input__icon" size="16"> <MinusOutlined /> </el-icon>关闭当前
|
|
|
</el-dropdown-item>
|
|
|
<el-dropdown-item :disabled="isDisabled" command="3">
|
|
|
- <el-icon class="el-input__icon" size="16"> <SwapOutlined /> </el-icon
|
|
|
- >关闭其他</el-dropdown-item
|
|
|
+ <el-icon class="el-input__icon" size="16"> <SwapOutlined /> </el-icon>关闭其他</el-dropdown-item
|
|
|
>
|
|
|
<el-dropdown-item :disabled="closeLeftTab" command="5">
|
|
|
- <el-icon class="el-input__icon" size="16"> <DoubleLeftOutlined /> </el-icon
|
|
|
- >关闭左侧</el-dropdown-item
|
|
|
+ <el-icon class="el-input__icon" size="16"> <DoubleLeftOutlined /> </el-icon>关闭左侧</el-dropdown-item
|
|
|
>
|
|
|
<el-dropdown-item :disabled="closeRightTab" command="6">
|
|
|
- <el-icon class="el-input__icon" size="16"> <DoubleRightOutlined /> </el-icon
|
|
|
- >关闭右侧</el-dropdown-item
|
|
|
+ <el-icon class="el-input__icon" size="16"> <DoubleRightOutlined /> </el-icon>关闭右侧</el-dropdown-item
|
|
|
>
|
|
|
<el-dropdown-item :disabled="isDisabled" command="4">
|
|
|
- <el-icon class="el-input__icon" size="16"> <CloseOutlined /> </el-icon
|
|
|
- >关闭全部</el-dropdown-item
|
|
|
+ <el-icon class="el-input__icon" size="16"> <CloseOutlined /> </el-icon>关闭全部</el-dropdown-item
|
|
|
>
|
|
|
</el-dropdown-menu>
|
|
|
</template>
|
|
|
@@ -202,11 +190,7 @@
|
|
|
const navMode = unref(getNavMode);
|
|
|
const { minMenuWidth, menuWidth }: any = unref(getMenuSetting);
|
|
|
let lenNum =
|
|
|
- navMode === 'horizontal' || !isMixMenuNoneSub.value
|
|
|
- ? '0px'
|
|
|
- : collapsed
|
|
|
- ? `${minMenuWidth}px`
|
|
|
- : `${menuWidth}px`;
|
|
|
+ navMode === 'horizontal' || !isMixMenuNoneSub.value ? '0px' : collapsed ? `${minMenuWidth}px` : `${menuWidth}px`;
|
|
|
return {
|
|
|
left: lenNum,
|
|
|
width: `calc(100%)`,
|
|
|
@@ -276,23 +260,16 @@
|
|
|
// 移除缓存组件名称
|
|
|
const delKeepAliveCompName = () => {
|
|
|
if (route.meta.keepAlive) {
|
|
|
- const name = router.currentRoute.value.matched.find((item) => item.name == route.name)
|
|
|
- ?.components?.default.name;
|
|
|
+ const name = router.currentRoute.value.matched.find((item) => item.name == route.name)?.components?.default.name;
|
|
|
if (name) {
|
|
|
- asyncRouteStore.keepAliveComponents = asyncRouteStore.keepAliveComponents.filter(
|
|
|
- (item) => item != name,
|
|
|
- );
|
|
|
+ asyncRouteStore.keepAliveComponents = asyncRouteStore.keepAliveComponents.filter((item) => item != name);
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 标签页列表
|
|
|
const tabsList: any = computed(() => tabsViewStore.tabsList);
|
|
|
- const whiteList: string[] = [
|
|
|
- PageEnum.BASE_LOGIN_NAME,
|
|
|
- PageEnum.REDIRECT_NAME,
|
|
|
- PageEnum.ERROR_PAGE_NAME,
|
|
|
- ];
|
|
|
+ const whiteList: string[] = [PageEnum.BASE_LOGIN_NAME, PageEnum.REDIRECT_NAME, PageEnum.ERROR_PAGE_NAME];
|
|
|
|
|
|
const isDisabled = computed(() => unref(tabsList).length === 1);
|
|
|
|
|
|
@@ -300,8 +277,7 @@
|
|
|
() => route.fullPath,
|
|
|
(to) => {
|
|
|
// 如果您用的路由模式是 hash 请去掉,|| route.hash 判断条件
|
|
|
- if (whiteList.includes(route.name as string) || route.hash || route.meta.tagView === false)
|
|
|
- return;
|
|
|
+ if (whiteList.includes(route.name as string) || route.hash || route.meta.tagView === false) return;
|
|
|
activeKey.value = to;
|
|
|
currentTabRoute.value = null;
|
|
|
refreshCurrent.value = false;
|
|
|
@@ -390,9 +366,7 @@
|
|
|
};
|
|
|
|
|
|
//当前路由对象 或者 右键选择tab路由对象
|
|
|
- const getCurrentTabRoute = computed(() =>
|
|
|
- currentTabRoute.value ? currentTabRoute.value : route,
|
|
|
- );
|
|
|
+ const getCurrentTabRoute = computed(() => (currentTabRoute.value ? currentTabRoute.value : route));
|
|
|
|
|
|
//tab 操作
|
|
|
const closeHandleSelect = (key) => {
|
|
|
@@ -437,8 +411,7 @@
|
|
|
function scrollTo(value: number, amplitude: number) {
|
|
|
const currentScroll = navScroll.value.scrollLeft;
|
|
|
const scrollWidth =
|
|
|
- (amplitude > 0 && currentScroll + amplitude >= value) ||
|
|
|
- (amplitude < 0 && currentScroll + amplitude <= value)
|
|
|
+ (amplitude > 0 && currentScroll + amplitude >= value) || (amplitude < 0 && currentScroll + amplitude <= value)
|
|
|
? value
|
|
|
: currentScroll + amplitude;
|
|
|
navScroll.value && navScroll.value.scrollTo(scrollWidth, 0);
|
|
|
@@ -460,9 +433,7 @@
|
|
|
const currentScroll = navScroll.value.scrollLeft;
|
|
|
if (navWidth - currentScroll / 2 <= containerWidth) return;
|
|
|
const scrollLeft =
|
|
|
- navWidth - currentScroll > containerWidth * 2
|
|
|
- ? currentScroll + containerWidth
|
|
|
- : navWidth - containerWidth;
|
|
|
+ navWidth - currentScroll > containerWidth * 2 ? currentScroll + containerWidth : navWidth - containerWidth;
|
|
|
scrollTo(scrollLeft, (scrollLeft - currentScroll) / 20);
|
|
|
}
|
|
|
|