first commit
This commit is contained in:
@@ -0,0 +1,286 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user