1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<template>
<div class="sub-menu">
<router-link
tag="button"
:class="{ btn: true, 'btn-active': isVisit(item.path) }"
v-for="(item, index) in menuStack"
:key="item.path"
:to="item.path"
>
{{ item.title }}
<Icon
@click="closeMenu(index)"
:name="isVisit(item.path) ? 'ssiclose_active' : 'ssiclose'"
:size="16"
/>
</router-link>
<slot name="tips" />
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
computed: {
...mapState({
menuStack: (state) => state.common.menuStack,
}),
},
methods: {
isVisit(val) {
const path = this.$route.path;
return path === val;
},
closeMenu(index) {
const menuStack = JSON.parse(JSON.stringify(this.menuStack));
const isVisit = this.isVisit(menuStack[index].path);
menuStack.splice(index, 1);
this.$store.commit("common/setMenuStack", menuStack);
if (isVisit) {
// 关闭的是当前正在查看的
const i = Math.max(0, index - 1);
this.$router.push(menuStack[i].path || "/");
}
},
},
};
</script>
<style lang="less" scoped>
.sub-menu {
width: 100%;
overflow-x: auto;
white-space: nowrap;
.mg-b(16);
.btn {
.fs(14);
.lh(20);
.pa(8, 13, 8, 13);
.mg-r(40);
color: #252631;
font-weight: bold;
border: none;
background-color: #fff;
border-radius: 5px;
cursor: pointer;
}
.btn-active {
color: #fff;
background-color: #2b63ff;
}
}
</style>