fix(projects): 修复multiTab关闭逻辑,添加关闭左边和右边的标签右键操作
This commit is contained in:
parent
560b8a158f
commit
ed90cb8f8e
@ -33,7 +33,7 @@ interface Props {
|
|||||||
y: number;
|
y: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
type DropdownKey = 'reload-current' | 'close-current' | 'close-other' | 'close-all';
|
type DropdownKey = 'reload-current' | 'close-current' | 'close-other' | 'close-left' | 'close-right' | 'close-all';
|
||||||
type Option = DropdownOption & {
|
type Option = DropdownOption & {
|
||||||
key: DropdownKey;
|
key: DropdownKey;
|
||||||
};
|
};
|
||||||
@ -49,7 +49,7 @@ const emit = defineEmits<{
|
|||||||
}>();
|
}>();
|
||||||
|
|
||||||
const app = useAppStore();
|
const app = useAppStore();
|
||||||
const { removeMultiTab, clearMultiTab } = useAppStore();
|
const { removeMultiTab, clearMultiTab, clearLeftMultiTab, clearRightMultiTab } = useAppStore();
|
||||||
const { handleReload } = useReloadInject();
|
const { handleReload } = useReloadInject();
|
||||||
const { bool: dropdownVisible, setTrue: show, setFalse: hide } = useBoolean(props.visible);
|
const { bool: dropdownVisible, setTrue: show, setFalse: hide } = useBoolean(props.visible);
|
||||||
|
|
||||||
@ -71,6 +71,16 @@ const options = computed<Option[]>(() => [
|
|||||||
key: 'close-other',
|
key: 'close-other',
|
||||||
icon: iconifyRender('ant-design:column-width-outlined')
|
icon: iconifyRender('ant-design:column-width-outlined')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: '关闭左边标签页',
|
||||||
|
key: 'close-left',
|
||||||
|
icon: iconifyRender('mdi:format-horizontal-align-left')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '关闭右边标签页',
|
||||||
|
key: 'close-right',
|
||||||
|
icon: iconifyRender('mdi:format-horizontal-align-right')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: '关闭全部标签页',
|
label: '关闭全部标签页',
|
||||||
key: 'close-all',
|
key: 'close-all',
|
||||||
@ -88,7 +98,7 @@ const actionMap = new Map<DropdownKey, () => void>([
|
|||||||
[
|
[
|
||||||
'close-current',
|
'close-current',
|
||||||
() => {
|
() => {
|
||||||
removeMultiTab(app.multiTab.activeRoute);
|
removeMultiTab(props.currentPath);
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
@ -97,6 +107,18 @@ const actionMap = new Map<DropdownKey, () => void>([
|
|||||||
clearMultiTab([props.currentPath]);
|
clearMultiTab([props.currentPath]);
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
[
|
||||||
|
'close-left',
|
||||||
|
() => {
|
||||||
|
clearLeftMultiTab(props.currentPath);
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'close-right',
|
||||||
|
() => {
|
||||||
|
clearRightMultiTab(props.currentPath);
|
||||||
|
}
|
||||||
|
],
|
||||||
[
|
[
|
||||||
'close-all',
|
'close-all',
|
||||||
() => {
|
() => {
|
||||||
|
@ -110,6 +110,37 @@ const appStore = defineStore({
|
|||||||
router.push(activePath);
|
router.push(activePath);
|
||||||
this.setActiveMultiTab(activePath);
|
this.setActiveMultiTab(activePath);
|
||||||
},
|
},
|
||||||
|
/** 删除左边多页签 */
|
||||||
|
clearLeftMultiTab(fullPath: string) {
|
||||||
|
const { routes } = this.multiTab;
|
||||||
|
const currentIndex = routes.findIndex(route => route.fullPath === fullPath);
|
||||||
|
const activeIndex = this.activeMultiTabIndex;
|
||||||
|
if (currentIndex > -1) {
|
||||||
|
const remain = [ROUTE_HOME.path, ...routes.slice(currentIndex).map(v => v.fullPath)];
|
||||||
|
const updateRoutes = routes.filter(v => remain.includes(v.fullPath));
|
||||||
|
this.multiTab.routes = updateRoutes;
|
||||||
|
if (activeIndex < currentIndex) {
|
||||||
|
const activePath = updateRoutes[updateRoutes.length - 1].fullPath;
|
||||||
|
router.push(activePath);
|
||||||
|
this.setActiveMultiTab(activePath);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/** 删除右边多页签 */
|
||||||
|
clearRightMultiTab(fullPath: string) {
|
||||||
|
const { routes } = this.multiTab;
|
||||||
|
const currentIndex = routes.findIndex(route => route.fullPath === fullPath);
|
||||||
|
const activeIndex = this.activeMultiTabIndex;
|
||||||
|
if (currentIndex > -1) {
|
||||||
|
const remain = [ROUTE_HOME.path, ...routes.slice(0, currentIndex + 1).map(v => v.fullPath)];
|
||||||
|
const updateRoutes = routes.filter(v => remain.includes(v.fullPath));
|
||||||
|
this.multiTab.routes = updateRoutes;
|
||||||
|
if (activeIndex > currentIndex) {
|
||||||
|
router.push(fullPath);
|
||||||
|
this.setActiveMultiTab(fullPath);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
/** 点击单个页签tab */
|
/** 点击单个页签tab */
|
||||||
handleClickTab(fullPath: string) {
|
handleClickTab(fullPath: string) {
|
||||||
if (this.multiTab.activeRoute !== fullPath) {
|
if (this.multiTab.activeRoute !== fullPath) {
|
||||||
|
Loading…
Reference in New Issue
Block a user