|
|
|
@ -1,22 +1,28 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="layout-tabs">
|
|
|
|
|
<el-tabs v-model="activeTab" type="card" class="demo-tabs" @tab-click="handleClick">
|
|
|
|
|
<el-tab-pane v-for="(item, index) in tabs" :key="index" :name="item.name">
|
|
|
|
|
<el-tabs :modelValue="activeTab" type="card" class="demo-tabs" @tab-click="handleClick">
|
|
|
|
|
<el-tab-pane v-for="(item, index) in tabList" :key="index" :name="item.name">
|
|
|
|
|
<template #label>
|
|
|
|
|
<XIcon :name="item.meta.icon" />
|
|
|
|
|
<XIcon class="tab-icon" :name="item.meta.icon" />
|
|
|
|
|
<span>{{ item.meta.title }}</span>
|
|
|
|
|
<XIcon
|
|
|
|
|
v-if="tabList.length > 1"
|
|
|
|
|
class="tab-close"
|
|
|
|
|
name="close-fill"
|
|
|
|
|
@click.stop="handleCloseTab(index)"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
|
<div class="operation">
|
|
|
|
|
<el-dropdown trigger="hover">
|
|
|
|
|
<el-dropdown trigger="hover" @command="handleCommand">
|
|
|
|
|
<span class="el-dropdown-link">
|
|
|
|
|
<XIcon name="apps-fill" />
|
|
|
|
|
</span>
|
|
|
|
|
<template #dropdown>
|
|
|
|
|
<el-dropdown-menu>
|
|
|
|
|
<el-dropdown-item>关闭全部</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item>关闭其他</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item command="all">关闭全部</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item command="other">关闭其他</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dropdown>
|
|
|
|
@ -25,16 +31,40 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
const activeTab = ref('home');
|
|
|
|
|
const tabs = computed(() => [
|
|
|
|
|
{ path: '/', name: 'home', meta: { title: '首页', icon: 'home-fill' } },
|
|
|
|
|
{ path: '/', name: 'route1', meta: { title: '菜单1', icon: 'home-fill' } },
|
|
|
|
|
{ path: '/', name: 'route2', meta: { title: '菜单2', icon: 'home-fill' } },
|
|
|
|
|
{ path: '/', name: 'route3', meta: { title: '菜单3', icon: 'home-fill' } },
|
|
|
|
|
{ path: '/', name: 'route4', meta: { title: '菜单4', icon: 'home-fill' } },
|
|
|
|
|
{ path: '/', name: 'route5', meta: { title: '菜单5', icon: 'home-fill' } },
|
|
|
|
|
]);
|
|
|
|
|
const handleClick = () => {};
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
const store = useStore();
|
|
|
|
|
const activeTab = computed(() => store.state.layout.activeTab);
|
|
|
|
|
const tabList = computed(() => store.state.layout.tabList);
|
|
|
|
|
watch(
|
|
|
|
|
() => unref(tabList),
|
|
|
|
|
(value) => {
|
|
|
|
|
if (!unref(activeTab) || value.findIndex((item) => item.name === unref(activeTab)) === -1) {
|
|
|
|
|
router.push({ name: value[0].name });
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{ immediate: true, deep: true }
|
|
|
|
|
);
|
|
|
|
|
const handleCloseTab = (index) => {
|
|
|
|
|
store.commit('layout/closeTab', {
|
|
|
|
|
index,
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
const handleClick = (tab) => {
|
|
|
|
|
router.push(unref(tabList)[tab.index].fullPath);
|
|
|
|
|
};
|
|
|
|
|
const handleCommand = (command) => {
|
|
|
|
|
switch (command) {
|
|
|
|
|
case 'all':
|
|
|
|
|
store.commit('layout/closeTab', {});
|
|
|
|
|
break;
|
|
|
|
|
case 'other':
|
|
|
|
|
store.commit('layout/closeTab', {
|
|
|
|
|
index: unref(tabList).findIndex((item) => item.name === unref(activeTab)),
|
|
|
|
|
reverse: true,
|
|
|
|
|
});
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
@ -70,11 +100,12 @@
|
|
|
|
|
height: 100%;
|
|
|
|
|
border: none;
|
|
|
|
|
padding: 0 @layout-space-large;
|
|
|
|
|
display: flex;
|
|
|
|
|
.el-tabs__item {
|
|
|
|
|
height: 100%;
|
|
|
|
|
min-width: 100px;
|
|
|
|
|
margin-right: -8px;
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
border: none;
|
|
|
|
@ -86,13 +117,29 @@
|
|
|
|
|
-webkit-mask-size: 100% 100%;
|
|
|
|
|
&:hover {
|
|
|
|
|
background-color: @color-white-dark;
|
|
|
|
|
.tab-close {
|
|
|
|
|
width: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&.is-active {
|
|
|
|
|
background-color: @color-primary-white;
|
|
|
|
|
.tab-close {
|
|
|
|
|
width: 20px;
|
|
|
|
|
}
|
|
|
|
|
.x-icon {
|
|
|
|
|
}
|
|
|
|
|
.tab-icon {
|
|
|
|
|
margin-right: @layout-space-small;
|
|
|
|
|
margin-top: 1px;
|
|
|
|
|
}
|
|
|
|
|
.tab-close {
|
|
|
|
|
margin-left: @layout-space-small;
|
|
|
|
|
border-radius: 50px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
transition: width 0.3s;
|
|
|
|
|
&:hover {
|
|
|
|
|
color: var(--el-color-danger);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|