|
|
@@ -2,14 +2,11 @@
|
|
|
<div class="tags" v-if="showTags">
|
|
|
<ul>
|
|
|
<li class="tags-li" v-for="(item, index) in tagsList" :class="{ active: isActive(item.path) }" :key="index">
|
|
|
- <router-link :to="item.path" class="tags-li-title">
|
|
|
- {{ item.title }}
|
|
|
- </router-link>
|
|
|
+ <router-link :to="{ path: item.path, query: { closeDialog: true } }" class="tags-li-title"> {{ item.title }} </router-link>
|
|
|
<span class="tags-li-icon" @click="closeTags(index)"></span>
|
|
|
</li>
|
|
|
<li class="tags-li close" v-if="tagsList.length > 1">
|
|
|
- <div class="allclose" @click="closeOther"><span>全部关闭</span></div>
|
|
|
- <!-- <span class="allclosed"></span> -->
|
|
|
+ <span class="allclose" @click="closeOther">全部关闭</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
@@ -23,6 +20,7 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 点击标签页
|
|
|
isActive(path) {
|
|
|
if (path instanceof Object) {
|
|
|
let fullpath = this.setFullPath(path);
|
|
|
@@ -77,8 +75,26 @@ export default {
|
|
|
},
|
|
|
// 设置标签
|
|
|
setTags(route) {
|
|
|
- const isExist = this.tagsList.some((item) => {
|
|
|
- return item.path.indexOf(route.path) > -1;
|
|
|
+ let tagArr = {
|
|
|
+ title: route.title || route.meta.title,
|
|
|
+ path: route.fullPath
|
|
|
+ };
|
|
|
+ if (!!route.name) {
|
|
|
+ tagArr = {
|
|
|
+ title: route.title || route.meta.title,
|
|
|
+ path: route.fullPath,
|
|
|
+ name: route.name
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ const isExist = this.tagsList.some((item, index) => {
|
|
|
+ let thisBi = item.path.indexOf(route.path) > -1;
|
|
|
+ if (thisBi) {
|
|
|
+ this.tagsList.splice(index, 1, tagArr);
|
|
|
+
|
|
|
+ this.$store.dispatch('tags', this.tagsList);
|
|
|
+ }
|
|
|
+ return thisBi;
|
|
|
});
|
|
|
if (!isExist) {
|
|
|
if (route.path === '/') {
|
|
|
@@ -87,18 +103,6 @@ export default {
|
|
|
if (this.tagsList.length >= 8) {
|
|
|
this.tagsList.shift();
|
|
|
}
|
|
|
- let tagArr = {
|
|
|
- title: route.title || route.meta.title,
|
|
|
- path: route.fullPath
|
|
|
- };
|
|
|
- if (!!route.name) {
|
|
|
- tagArr = {
|
|
|
- title: route.title || route.meta.title,
|
|
|
- path: route.fullPath,
|
|
|
- name: route.name
|
|
|
- };
|
|
|
- }
|
|
|
-
|
|
|
this.tagsList.push(tagArr);
|
|
|
this.$store.dispatch('tags', this.tagsList);
|
|
|
}
|
|
|
@@ -124,11 +128,6 @@ export default {
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@import '@assets/css/public-style.scss';
|
|
|
-.tags {
|
|
|
- height: 60px;
|
|
|
- line-height: 60px;
|
|
|
-}
|
|
|
-
|
|
|
.tags ul {
|
|
|
box-sizing: border-box;
|
|
|
width: 100%;
|
|
|
@@ -138,20 +137,17 @@ export default {
|
|
|
|
|
|
.tags-li {
|
|
|
float: left;
|
|
|
- font-size: 12px;
|
|
|
+ font-size: rem(12);
|
|
|
cursor: pointer;
|
|
|
- height: 14px;
|
|
|
- line-height: 14px;
|
|
|
border-right: 1px solid #a6abb6;
|
|
|
- padding: 0 20px 0 20px;
|
|
|
- margin: 25px 0;
|
|
|
+ padding: 0 rem(20) 0 rem(20);
|
|
|
vertical-align: middle;
|
|
|
-webkit-transition: all 0.3s ease-in;
|
|
|
-moz-transition: all 0.3s ease-in;
|
|
|
transition: all 0.3s ease-in;
|
|
|
}
|
|
|
.close {
|
|
|
- padding: 0 20px 0 20px;
|
|
|
+ padding: 0 rem(20) 0 rem(20);
|
|
|
-webkit-transition: all 0.3s ease-in;
|
|
|
-moz-transition: all 0.3s ease-in;
|
|
|
transition: all 0.3s ease-in;
|
|
|
@@ -159,18 +155,18 @@ export default {
|
|
|
position: relative;
|
|
|
}
|
|
|
.tags-li-icon {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
+ width: rem(14);
|
|
|
+ height: rem(14);
|
|
|
+ min-width: 14px;
|
|
|
+ min-height: 14px;
|
|
|
display: inline-block;
|
|
|
border-radius: 50%;
|
|
|
background: url('../../assets/img/closed.png') no-repeat center center;
|
|
|
- vertical-align: text-top;
|
|
|
+ vertical-align: bottom;
|
|
|
}
|
|
|
.active .tags-li-icon {
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- display: inline-block;
|
|
|
background: url('../../assets/img/close.png') no-repeat center center;
|
|
|
+ vertical-align: bottom;
|
|
|
}
|
|
|
|
|
|
.tags-li.active {
|
|
|
@@ -178,11 +174,12 @@ export default {
|
|
|
}
|
|
|
|
|
|
.tags-li-title {
|
|
|
- max-width: 80px;
|
|
|
+ max-width: rem(80);
|
|
|
+ font-size: rem(12);
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
- margin-right: 5px;
|
|
|
+ margin-right: rem(10);
|
|
|
color: #a6abb6;
|
|
|
}
|
|
|
|
|
|
@@ -196,30 +193,29 @@ export default {
|
|
|
.allclose {
|
|
|
display: inline-block;
|
|
|
position: absolute;
|
|
|
- top: -3px;
|
|
|
+ top: 0;
|
|
|
width: max-content;
|
|
|
- height: 18px;
|
|
|
- padding-top: 3px;
|
|
|
+ height: rem(18);
|
|
|
+ min-height: 18px;
|
|
|
+ line-height: inherit;
|
|
|
+ padding: 0 rem(7);
|
|
|
background: $mainTextColor;
|
|
|
- border-radius: 9px;
|
|
|
- /* background:url("../../assets/img/allClose.png") no-repeat center center; */
|
|
|
+ border-radius: rem(10);
|
|
|
vertical-align: middle;
|
|
|
- font-size: 10px;
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
- line-height: 14px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.allclose span {
|
|
|
- padding: 0px 10px;
|
|
|
+ padding: 0px rem(10);
|
|
|
}
|
|
|
.allclosed {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
+ width: rem(14);
|
|
|
+ height: rem(14);
|
|
|
display: inline-block;
|
|
|
background: url('../../assets/img/allClosed.png') no-repeat center center;
|
|
|
vertical-align: middle;
|
|
|
- margin-left: 10px;
|
|
|
+ margin-left: rem(10);
|
|
|
}
|
|
|
</style>
|
Shannon_mu