Skip to content

Commit 267dc85

Browse files
lin-xinlin-xin
committed
'新增标签页切换功能'
1 parent 6592cfd commit 267dc85

File tree

6 files changed

+220
-32
lines changed

6 files changed

+220
-32
lines changed

‎src/components/common/Home.vue‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,23 @@
22
<div class="wrapper">
33
<v-head></v-head>
44
<v-sidebar></v-sidebar>
5-
<div class="content" :class="{'content-collapse':collapse}">
6-
<transition name="move" mode="out-in"><router-view></router-view></transition>
5+
<div class="content-box" :class="{'content-collapse':collapse}">
6+
<v-tags></v-tags>
7+
<div class="content">
8+
<transition name="move" mode="out-in">
9+
<keep-alive>
10+
<router-view></router-view>
11+
</keep-alive>
12+
</transition>
13+
</div>
714
</div>
815
</div>
916
</template>
1017

1118
<script>
1219
import vHead from './Header.vue';
1320
import vSidebar from './Sidebar.vue';
21+
import vTags from './Tags.vue';
1422
import bus from '../common/bus';
1523
export default {
1624
data(){
@@ -19,7 +27,7 @@
1927
}
2028
},
2129
components:{
22-
vHead, vSidebar
30+
vHead, vSidebar, vTags
2331
},
2432
created(){
2533
bus.$on('collapse', msg => {

‎src/components/common/Tags.vue‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
<template>
2+
<div class="tags" v-if="showTags">
3+
<ul>
4+
<li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index">
5+
<router-link :to="item.path" class="tags-li-title">
6+
{{item.title}}
7+
</router-link>
8+
<span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span>
9+
</li>
10+
</ul>
11+
<div class="tags-close-box">
12+
<el-dropdown @command="handleTags">
13+
<el-button size="mini" type="primary">
14+
标签选项<i class="el-icon-arrow-down el-icon--right"></i>
15+
</el-button>
16+
<el-dropdown-menu size="small" slot="dropdown">
17+
<el-dropdown-item command="other">关闭其他</el-dropdown-item>
18+
<el-dropdown-item command="all">关闭所有</el-dropdown-item>
19+
</el-dropdown-menu>
20+
</el-dropdown>
21+
</div>
22+
</div>
23+
</template>
24+
25+
<script>
26+
export default {
27+
data() {
28+
return {
29+
tagsList: []
30+
}
31+
},
32+
methods: {
33+
isActive(path) {
34+
return path === this.$route.path;
35+
},
36+
// 关闭单个标签
37+
closeTags(index) {
38+
const delItem = this.tagsList.splice(index, 1)[0];
39+
const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
40+
if (item) {
41+
delItem.path === this.$route.path && this.$router.push(item.path);
42+
}else{
43+
this.$router.push('/readme');
44+
}
45+
},
46+
// 关闭全部标签
47+
closeAll(){
48+
console.log(1111);
49+
this.tagsList = [];
50+
this.$router.push('/readme');
51+
},
52+
// 关闭其他标签
53+
closeOther(){
54+
const curItem = this.tagsList.filter(item => {
55+
return item.path === this.$route.path;
56+
})
57+
this.tagsList = curItem;
58+
},
59+
// 设置标签
60+
setTags(route){
61+
const isExist = this.tagsList.some(item => {
62+
return item.path === route.path;
63+
})
64+
!isExist && this.tagsList.push({
65+
title: route.meta.title,
66+
path: route.path
67+
})
68+
},
69+
handleTags(command){
70+
command === 'other' ? this.closeOther() : this.closeAll();
71+
}
72+
},
73+
computed: {
74+
showTags() {
75+
return this.tagsList.length > 0;
76+
}
77+
},
78+
watch:{
79+
$route(newValue, oldValue){
80+
this.setTags(newValue);
81+
}
82+
},
83+
created(){
84+
this.setTags(this.$route);
85+
}
86+
}
87+
88+
</script>
89+
90+
91+
<style scoped>
92+
.tags {
93+
position: relative;
94+
height: 40px;
95+
overflow: hidden;
96+
background: #fff;
97+
padding-right: 120px;
98+
}
99+
100+
.tags ul {
101+
box-sizing: border-box;
102+
width: 100%;
103+
height: 100%;
104+
}
105+
106+
.tags-li {
107+
float: left;
108+
margin: 4px;
109+
border-radius: 3px;
110+
font-size: 12px;
111+
overflow: hidden;
112+
cursor: pointer;
113+
height: 32px;
114+
line-height: 32px;
115+
border: 1px solid #e9eaec;
116+
background: #fff;
117+
padding: 0 5px 0 12px;
118+
vertical-align: middle;
119+
color: #666;
120+
-webkit-transition: all .3s ease-in;
121+
-moz-transition: all .3s ease-in;
122+
transition: all .3s ease-in;
123+
}
124+
125+
.tags-li:hover {
126+
background: #f8f8f8;
127+
}
128+
129+
.tags-li.active {
130+
color: #fff;
131+
}
132+
133+
.tags-li-title {
134+
float: left;
135+
max-width: 80px;
136+
overflow: hidden;
137+
white-space: nowrap;
138+
text-overflow: ellipsis;
139+
margin-right: 5px;
140+
color: #666;
141+
}
142+
143+
.tags-li.active .tags-li-title {
144+
color: #fff;
145+
}
146+
147+
.tags-close-box {
148+
position: absolute;
149+
right: 0;
150+
top: 0;
151+
box-sizing: border-box;
152+
padding-top: 8px;
153+
text-align: center;
154+
width: 110px;
155+
height: 40px;
156+
background: #fff;
157+
box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);
158+
z-index: 10;
159+
}
160+
161+
</style>

‎src/router/index.js‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,49 +12,58 @@ export default new Router({
1212
{
1313
path: '/readme',
1414
component: resolve => require(['../components/common/Home.vue'], resolve),
15+
meta: { title: '自述文件' },
1516
children:[
1617
{
1718
path: '/',
18-
component: resolve => require(['../components/page/Readme.vue'], resolve)
19+
component: resolve => require(['../components/page/Readme.vue'], resolve),
20+
meta: { title: '自述文件' }
1921
},
2022
{
2123
path: '/table',
22-
component: resolve => require(['../components/page/BaseTable.vue'], resolve)
24+
component: resolve => require(['../components/page/BaseTable.vue'], resolve),
25+
meta: { title: '基础表格' }
2326
},
2427
{
2528
path: '/form',
26-
component: resolve => require(['../components/page/BaseForm.vue'], resolve)
29+
component: resolve => require(['../components/page/BaseForm.vue'], resolve),
30+
meta: { title: '基本表单' }
2731
},
2832
{
2933
// 富文本编辑器组件
3034
path: '/editor',
31-
component: resolve => require(['../components/page/VueEditor.vue'], resolve)
35+
component: resolve => require(['../components/page/VueEditor.vue'], resolve),
36+
meta: { title: '富文本编辑器' }
3237
},
3338
{
3439
// markdown组件
3540
path: '/markdown',
36-
component: resolve => require(['../components/page/Markdown.vue'], resolve)
41+
component: resolve => require(['../components/page/Markdown.vue'], resolve),
42+
meta: { title: 'markdown编辑器' }
3743
},
3844
{
3945
// 图片上传组件
4046
path: '/upload',
41-
component: resolve => require(['../components/page/Upload.vue'], resolve)
47+
component: resolve => require(['../components/page/Upload.vue'], resolve),
48+
meta: { title: '文件上传' }
4249
},
4350
{
4451
// vue-schart组件
4552
path: '/charts',
46-
component: resolve => require(['../components/page/BaseCharts.vue'], resolve)
53+
component: resolve => require(['../components/page/BaseCharts.vue'], resolve),
54+
meta: { title: 'schart图表' }
4755
},
4856
{
4957
// 拖拽列表组件
5058
path: '/drag',
51-
component: resolve => require(['../components/page/DragList.vue'], resolve)
59+
component: resolve => require(['../components/page/DragList.vue'], resolve),
60+
meta: { title: '拖拽列表' }
5261
},
5362
{
5463
// 权限页面
5564
path: '/permission',
5665
component: resolve => require(['../components/page/Permission.vue'], resolve),
57-
meta: {permission: true}
66+
meta: { title: '权限测试', permission: true }
5867
}
5968
]
6069
},

‎static/css/color-dark.css‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
1-
.header{
2-
background-color: #242f42;
3-
}
4-
.login-wrap{
5-
background: #324157;
6-
}
7-
.plugins-tips{
8-
background: #eef1f6;
9-
}
10-
.plugins-tips a{
11-
color: #20a0ff;
12-
}
13-
.el-upload--text em {
14-
color: #20a0ff;
15-
}
16-
.pure-button{
17-
background: #20a0ff;
1+
.header{
2+
background-color: #242f42;
3+
}
4+
.login-wrap{
5+
background: #324157;
6+
}
7+
.plugins-tips{
8+
background: #eef1f6;
9+
}
10+
.plugins-tips a{
11+
color: #20a0ff;
12+
}
13+
.el-upload--text em {
14+
color: #20a0ff;
15+
}
16+
.pure-button{
17+
background: #20a0ff;
18+
}
19+
.tags-li.active {
20+
border: 1px solid #409EFF;
21+
background-color: #409EFF;
1822
}

‎static/css/main.css‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,19 @@ body{
88
font-family:'PingFang SC', "Helvetica Neue",Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
99
}
1010
a{text-decoration: none}
11-
.content{
12-
background: none repeat scroll 0 0 #f0f0f0;
11+
.content-box{
1312
position: absolute;
1413
left: 250px;
1514
right: 0;
1615
top: 70px;
1716
bottom:0;
17+
overflow-y: scroll;
18+
}
19+
.content{
20+
background: none repeat scroll 0 0 #f0f0f0;
1821
width: auto;
1922
padding:40px;
2023
box-sizing: border-box;
21-
overflow-y: scroll;
2224
-webkit-transition: left .3s ease-in-out;
2325
transition: left .3s ease-in-out;
2426
}

‎static/css/theme-green/color-green.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,8 @@
1919
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus {
2020
background-color: #00d1b2 !important;
2121
border-color: #00d1b2 !important;
22+
}
23+
.tags-li.active {
24+
border: 1px solid #00d1b2;
25+
background-color: #00d1b2;
2226
}

0 commit comments

Comments
 (0)