287 lines
7.4 KiB
Vue
287 lines
7.4 KiB
Vue
<template>
|
|
<div class="ele-admin-tabs" id="history-menu-tabs">
|
|
<el-tabs v-model="activeName" tab-position="top" @tab-click="tabClick">
|
|
<el-tab-pane name="/platform/home">
|
|
<span slot="label">
|
|
<i class="el-icon-house" @click.stop="close('/platform/home')"></i>
|
|
首页
|
|
</span>
|
|
</el-tab-pane>
|
|
|
|
<el-tab-pane v-for="item in menuTabs" :label="item.name" :name="item.id" :key="item.id">
|
|
<span slot="label">
|
|
{{ item.name }}
|
|
<i class="el-icon-close" @click.stop="close(item)"></i>
|
|
</span>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
|
|
<el-dropdown class="ele-admin-tabs-drop" size="small" @command="handleCommand">
|
|
<span class="el-dropdown-link">
|
|
<i class="el-icon-arrow-down el-dropdown-selfdefine"></i>
|
|
</span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item command="closeOther" icon="el-icon-remove-outline">关闭其他</el-dropdown-item>
|
|
<el-dropdown-item command="closeAll" icon="el-icon-circle-close">关闭全部</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
name: "HeaderTabPage",
|
|
store,
|
|
data() {
|
|
return {
|
|
activeName: "/platform/home"
|
|
}
|
|
},
|
|
computed: {
|
|
activeMenuIndex() {
|
|
return this.$store.state.activeMenuIndex
|
|
},
|
|
fullMenus() {
|
|
return this.$store.getters.fullMenus
|
|
},
|
|
historyMenuIds() {
|
|
return this.$store.getters.historyMenuIds
|
|
},
|
|
menuTabs() {
|
|
if (this.historyMenuIds && this.historyMenuIds.length > 0) {
|
|
return this.fullMenus.filter((menu) => this.historyMenuIds.includes(menu.id))
|
|
}
|
|
return []
|
|
}
|
|
},
|
|
methods: {
|
|
tabClick({ name }) {
|
|
//首页的因为没有菜单直接跳
|
|
if (name === "/platform/home") {
|
|
this.$store.dispatch("pjaxRoute", "/platform/home")
|
|
return
|
|
}
|
|
const menu = this.fullMenus.find((menu) => menu.id === name)
|
|
this.$store.dispatch("pjaxRoute", menu.href)
|
|
},
|
|
close(item) {
|
|
this.$store.commit("removeHistoryMenuId", item.id)
|
|
if (this.historyMenuIds.length === 0) {
|
|
this.$store.dispatch("pjaxRoute", "/platform/home")
|
|
return
|
|
}
|
|
const historyMenuId = this.historyMenuIds[this.historyMenuIds.length - 1]
|
|
const menu = this.fullMenus.find((menu) => menu.id === historyMenuId)
|
|
this.$store.dispatch("pjaxRoute", menu.href)
|
|
},
|
|
handleCommand(command) {
|
|
if (command === "closeOther") {
|
|
const otherMenuIds = this.historyMenuIds.filter((id) => id !== this.activeMenuIndex)
|
|
this.$store.commit("removeHistoryMenuIds", otherMenuIds)
|
|
} else if (command === "closeAll") {
|
|
this.$store.commit("clearHistoryMenuIds")
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
activeMenuIndex: {
|
|
handler: function (val) {
|
|
if (val) {
|
|
this.activeName = this.activeMenuIndex
|
|
} else {
|
|
this.activeName = "/platform/home"
|
|
}
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$store.commit("addHistoryMenuId", this.activeMenuIndex)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ele-admin-tabs {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
height: 40px;
|
|
background: var(--color-white);
|
|
-webkit-box-shadow: var(--header-light-shadow);
|
|
box-shadow: var(--header-light-shadow);
|
|
padding: 0 40px 0 15px;
|
|
z-index: 99;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
|
|
.ele-admin-tabs > .el-tabs {
|
|
-webkit-box-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ele-admin-tabs .el-tabs__item {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
color: var(--color-text-secondary);
|
|
-webkit-transition:
|
|
background-color 0.2s,
|
|
color 0.2s;
|
|
transition:
|
|
background-color 0.2s,
|
|
color 0.2s;
|
|
padding: 0 15px !important;
|
|
}
|
|
|
|
.ele-admin-tabs .el-tabs__item.is-closable {
|
|
padding-right: 8px !important;
|
|
}
|
|
|
|
.ele-admin-tabs .el-tabs__item:after {
|
|
content: "";
|
|
width: 0;
|
|
height: 2px;
|
|
background: var(--color-primary);
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.ele-admin-tabs .el-tabs__item:hover {
|
|
color: var(--color-text-primary);
|
|
background: var(--header-tool-hover-bg);
|
|
}
|
|
|
|
.ele-admin-tabs .el-tabs__item.is-active {
|
|
color: var(--color-primary);
|
|
background: var(--color-primary-1);
|
|
}
|
|
|
|
.ele-admin-tabs .el-tabs__item.is-active:after {
|
|
width: 100%;
|
|
}
|
|
|
|
.ele-admin-tabs .el-tabs__item .el-icon-close {
|
|
font-size: 13px;
|
|
margin-left: 4px;
|
|
color: var(--color-text-secondary);
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.ele-admin-tabs .el-tabs__item .el-icon-close:before {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
display: inline;
|
|
}
|
|
|
|
.ele-admin-tabs .el-tabs__item .el-icon-close:hover {
|
|
color: #fff;
|
|
background: var(--color-danger);
|
|
}
|
|
|
|
.ele-admin-tabs .el-tabs__item:focus.is-active.is-focus:not(:active) {
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.ele-admin-tabs .el-tabs__item.sortable-ghost {
|
|
opacity: 0;
|
|
}
|
|
|
|
.ele-admin-tabs .el-tabs__active-bar,
|
|
.ele-admin-tabs .el-tabs__content {
|
|
display: none;
|
|
}
|
|
|
|
.ele-admin-tabs .el-tabs__nav-wrap {
|
|
margin: 0;
|
|
}
|
|
|
|
.ele-admin-tabs .el-tabs__nav-wrap:after {
|
|
display: none;
|
|
}
|
|
|
|
.ele-admin-tabs .el-tabs__nav-wrap.is-scrollable {
|
|
padding: 0 39px 0 40px;
|
|
}
|
|
|
|
.ele-admin-tabs .el-tabs__nav-next,
|
|
.ele-admin-tabs .el-tabs__nav-prev {
|
|
width: 40px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
color: var(--color-text-secondary);
|
|
font-size: 16px;
|
|
-webkit-transition:
|
|
background-color 0.2s,
|
|
color 0.2s;
|
|
transition:
|
|
background-color 0.2s,
|
|
color 0.2s;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
}
|
|
|
|
.ele-admin-tabs .el-tabs__nav-next:hover,
|
|
.ele-admin-tabs .el-tabs__nav-prev:hover {
|
|
color: var(--color-text-primary);
|
|
background: var(--header-tool-hover-bg);
|
|
}
|
|
|
|
.ele-admin-tabs .ele-admin-tabs-drop {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.ele-admin-tabs .ele-admin-tabs-drop .el-icon-arrow-down {
|
|
width: 40px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
color: var(--color-text-secondary);
|
|
font-size: 16px;
|
|
-webkit-transition:
|
|
background-color 0.2s,
|
|
color 0.2s;
|
|
transition:
|
|
background-color 0.2s,
|
|
color 0.2s;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ele-admin-tabs .ele-admin-tabs-drop .el-icon-arrow-down:hover {
|
|
color: var(--color-text-primary);
|
|
background: var(--header-tool-hover-bg);
|
|
}
|
|
|
|
.ele-admin-tabs .ele-admin-tab-context-trigger {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ele-admin-tabs .ele-admin-tab-context-menu {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 6px;
|
|
}
|
|
</style>
|