Commit 16c80870 authored by huangjie's avatar huangjie

导航栏修改

parent af29fa40
<template>
<div id="tags-view-container" class="tags-view-container">
<div id="getviews">
<div class="alltags" v-if="visitedViews.length > 0">
<div class="imgs" @click="closeall">
<img src="@/assets/images/all.png" v-if="!showall" />
<img src="@/assets/images/all_on.png" v-if="showall" />
<!--<i class="el-icon-arrow-down" v-if="!showall"></i> <i class="el-icon-arrow-up" v-if="showall"></i>-->
</div>
<el-collapse-transition>
<div class="tagslist" :class="{'noshow':!showall}">
<router-link v-for="(tag, index) in visitedViews" ref="tag" :key="tag.fullPath" :class="isActive(tag)?'active':''"
:to="{ path: tag.fullPath, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
@contextmenu.prevent.native="openMenu(tag,$event)">
<div @click="changetags">
<i class="el-icon-check"></i>
<span :id="isActive(tag)?'tagTitles':''">{{ tag.title }}</span>
</div>
</router-link>
<div class="clasall" @click="closeAllTag(selectedTag)">关闭全部标签</div>
</div>
</el-collapse-transition>
</div>
<div id="getviews" ref="getviews">
<scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
<draggable v-model="visitedViews" :options="dragOptions" @end="end">
<router-link v-for="(tag, index) in visitedViews" ref="tag" :key="tag.fullPath" :class="isActive(tag)?'active':''"
......@@ -29,10 +9,12 @@
<!--<svg :class="isActive(tag)?'tags-icon tags-icon-active':'tags-icon'" aria-hidden="true">-->
<!--<use :xlink:href="iconName(tag)" />-->
<!--</svg>-->
<div class="hoverclass">
<span :id="isActive(tag)?'tagTitle':''">{{ tag.title.replace(/<[^>]+>/g, '') }}</span>
<span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
<i
:class="index!=visitedViews.length-1 && index != isActiveIndex() && index != isActiveIndex()-1?'tags-item-line':'tags-item-line item-color'" />
</div>
</router-link>
</draggable>
</scroll-pane>
......@@ -44,16 +26,35 @@
<li v-if="!isLastView()" @click="closeRightTags"><i class="el-icon-right"></i> 关闭右侧</li>
<li @click="closeAllTags(selectedTag)"><i class="el-icon-circle-close"></i> 全部关闭</li>
</ul>
<div class="alltags" v-if="visitedViews.length > 0 && havemore">
<div class="imgs" @click="closeall" :class="{'showall':showall}">
<img src="@/assets/images/index/lookmore.png" />
</div>
<el-collapse-transition>
<div class="tagslist" :class="{'noshow':!showall}">
<router-link v-for="(tag, index) in visitedViews" ref="tag" :key="tag.fullPath" :class="isActive(tag)?'active':''"
:to="{ path: tag.fullPath, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
@contextmenu.prevent.native="openMenu(tag,$event)">
<div @click="changetags">
<i class="el-icon-check"></i>
<span :id="isActive(tag)?'tagTitles':''">{{ tag.title }}</span>
</div>
</router-link>
<div class="clasall" @click="closeAllTag(selectedTag)">关闭全部标签</div>
</div>
</el-collapse-transition>
</div>
</div>
</div>
</template>
<script>
import draggable from 'vuedraggable';
import ScrollPane from './ScrollPane';
import path from 'path';
import draggable from 'vuedraggable'
import ScrollPane from './ScrollPane'
import path from 'path'
export default {
export default {
components: { ScrollPane, draggable },
data() {
return {
......@@ -69,7 +70,8 @@ export default {
ghostClass: 'ghost', // 拖拽过程中占位元素的class名称
sort: true, // 是否启用排序功能
draggable: '.tags-view-item', // 可拖拽元素的选择器
}
},
havemore:false,
};
},
computed: {
......@@ -105,6 +107,7 @@ export default {
this.addTags();
this.moveToCurrentTag();
this.getviews();
this.getviewswidth()
},
visible(value) {
if (value) {
......@@ -118,6 +121,7 @@ export default {
this.$nextTick(() => {
this.initTags();
this.addTags();
this.getviewswidth()
});
},
methods: {
......@@ -139,6 +143,12 @@ export default {
});
sessionStorage.setItem("views", JSON.stringify(viewlist));
},
getviewswidth(){
let fatherwidth = this.$refs.getviews.offsetWidth-6
let viewlength = this.$store.state.tagsView.visitedViews.length
//是否超出了能展示最多的个数
this.havemore = fatherwidth/80<viewlength
},
changetags() {
this.showall = false;
},
......@@ -343,20 +353,26 @@ export default {
background: #fff;
position: relative;
::v-deep .el-scrollbar__wrap {
margin-left: 64px;
/*margin-left: 64px;*/
margin-left: 12px;
padding-top: 20px;
}
.tags-view-wrapper {
::v-deep .el-scrollbar__view{
>div{display: flex;}
}
.tags-view-item {
display: inline-block;
position: relative;
cursor: pointer;
min-width: 128px;
height: 32px;
line-height: 32px;
color: #495060;
height: 36px;
line-height: 36px;
color: rgba(35, 35, 35, 0.4);
background: #fff;
padding: 0 20px 0 8px;
font-size: 12px;
max-width: 140px;
min-width: 80px;
flex: 1 1 0px;
.tags-icon {
width: 16px;
height: 16px;
......@@ -370,11 +386,11 @@ export default {
.tags-item-line {
display: block;
width: 1px;
height: 24px;
height: 14px;
background: #d0d1d9;
position: absolute;
right: 0;
top: 4px;
top: 9px;
z-index: 2;
&.item-color {
background: #ffffff;
......@@ -383,23 +399,31 @@ export default {
/*&:first-of-type {*/
/*margin-left: 64px;*/
/*}*/
.hoverclass{
padding: 0 20px 0 8px;
height: 28px;
line-height: 28px;
margin: 4px;
width: calc(100% - 8px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: 4px;
&:hover {
.el-icon-close {
background-color: rgba(153, 153, 153, 0.3);
color: #999999;
background: #F5F5F5;
color: #232323;
}
}
.el-icon-close:hover {
background: #EEEEEE;;
color: #999999;
}
&.active {
background-color: #f5f5f5;
color: #232323;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
&:hover {
.el-icon-close {
background-color: initial;
color: initial;
}
}
}
}
}
......@@ -428,9 +452,9 @@ export default {
position: absolute;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
left: 24px;
width: 16px;
height: 16px;
right: -34px;
top: 28px;
cursor: pointer;
text-align: center;
......@@ -438,15 +462,23 @@ export default {
&::after {
content: " ";
position: absolute;
border-right: 1px solid #efefef;
height: 18px;
width: 0;
top: 3px;
right: -8px;
}
.imgs > img {
width: 24px;
height: 24px;
.imgs {
border-radius: 4px;
&:hover{
background: #EEEEEE;
}
> img {
width: 16px;
}
}
.showall{
background: #EEEEEE;
}
.tagslist {
transition: all 0.2s;
......@@ -521,8 +553,8 @@ export default {
.tags-view-item {
.el-icon-close {
position: absolute;
right: 5px;
top: 8px;
right: 9px;
top: 10px;
width: 16px;
height: 16px;
vertical-align: 2px;
......@@ -533,9 +565,10 @@ export default {
&:before {
transform: scale(0.95);
display: inline-block;
vertical-align: -2.5px;
vertical-align: -1.5px;
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment