jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): 添加多页签Tab点击后自动往中间滚动

Browse Source
This commit is contained in:
Soybean
2021-11-25 00:50:55 +08:00
parent 1ffb75afce
commit 8ce627a397
6 changed files with 48 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/layouts/common/GlobalTab/components/MultiTab/index.vue
View File

@ -1,13 +1,14 @@
<template>
<div v-if="theme.multiTabStyle.mode === 'chrome'" class="flex items-end h-full">
<chrome-tab
v-for="item in app.multiTab.routes"
v-for="(item, index) in app.multiTab.routes"
:key="item.path"
:is-active="app.multiTab.activeRoute === item.fullPath"
:primary-color="theme.themeColor"
:closable="item.name !== ROUTE_HOME.name"
:dark-mode="theme.darkMode"
@click="handleClickTab(item.fullPath)"
:is-last="index === app.multiTab.routes.length - 1"
@click="handleClickChromeTab($event, item.fullPath)"
@close="removeMultiTab(item.fullPath)"
@contextmenu="handleContextMenu($event, item.fullPath)"
>
@ -48,6 +49,12 @@ import { useBoolean } from '@/hooks';
import { setTabRouteStorage } from '@/utils';
import { ContextMenu } from './components';
interface Emits {
(e: 'scroll', clientX: number): void;
}
const emit = defineEmits<Emits>();
const theme = useThemeStore();
const app = useAppStore();
const { removeMultiTab, handleClickTab } = useAppStore();
@ -62,6 +69,11 @@ function setDropdownConfig(x: number, y: number, currentPath: string) {
Object.assign(dropdownConfig, { x, y, currentPath });
}
function handleClickChromeTab(e: MouseEvent, fullPath: string) {
emit('scroll', e.clientX);
handleClickTab(fullPath);
}
function handleContextMenu(e: MouseEvent, fullPath: string) {
e.preventDefault();
const { clientX, clientY } = e;