<template>
|
<div
|
ref="scrollCon"
|
@DOMMouseScroll="handlescroll"
|
@mousewheel="handlescroll"
|
class="tags-scroll-content"
|
>
|
<div
|
ref="scrollBody"
|
class="tags-scroll-body"
|
:style="{ left: tagBodyLeft + 'px' }"
|
>
|
<transition-group name="taglist-moving-animation">
|
<Tag
|
type="dot"
|
v-for="item in pageTagsList"
|
ref="tagsPageOpened"
|
:key="item.name"
|
:name="item.name"
|
@on-close="closePage"
|
@click.native="linkTo(item)"
|
:closable="item.name == 'home_index' ? false : true"
|
:color="
|
item.children
|
? item.children[0].name == currentPageName
|
? 'primary'
|
: 'default'
|
: item.name == currentPageName
|
? 'primary'
|
: 'default'
|
"
|
>{{ itemTitle(item) }}</Tag
|
>
|
</transition-group>
|
</div>
|
<div class="close-tag-content">
|
<Dropdown
|
transfer
|
trigger="hover"
|
@on-click="handleTagsOption"
|
placement="bottom-end"
|
transfer-class-name="close-tag-dropdown"
|
>
|
<div class="icon-content">
|
<Icon type="ios-arrow-down" size="16" />
|
</div>
|
<DropdownMenu slot="list">
|
<DropdownItem name="clearAll">{{ $t("closeAll") }}</DropdownItem>
|
<DropdownItem name="clearOthers">{{
|
$t("closeOthers")
|
}}</DropdownItem>
|
</DropdownMenu>
|
</Dropdown>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "tagsPageOpened",
|
data() {
|
return {
|
currentPageName: this.$route.name,
|
tagBodyLeft: 0,
|
paddingRight: 40,
|
refsTag: [],
|
tagsCount: 1,
|
};
|
},
|
props: {
|
pageTagsList: Array,
|
beforePush: {
|
type: Function,
|
default: (item) => {
|
return true;
|
},
|
},
|
},
|
computed: {
|
title() {
|
return this.$store.state.app.currentTitle;
|
},
|
tagsList() {
|
return this.$store.state.app.pageOpenedList;
|
},
|
},
|
methods: {
|
itemTitle(item) {
|
if (typeof item.title == "object") {
|
return this.$t(item.title.i18n);
|
} else {
|
return item.title;
|
}
|
},
|
closePage(event, name) {
|
let pageOpenedList = this.$store.state.app.pageOpenedList;
|
let lastPageObj = pageOpenedList[0];
|
if (this.currentPageName == name) {
|
let len = pageOpenedList.length;
|
for (let i = 1; i < len; i++) {
|
if (pageOpenedList[i].name == name) {
|
if (i < len - 1) {
|
lastPageObj = pageOpenedList[i + 1];
|
} else {
|
lastPageObj = pageOpenedList[i - 1];
|
}
|
break;
|
}
|
}
|
} else {
|
let tagWidth = event.target.parentNode.offsetWidth;
|
this.tagBodyLeft = Math.min(this.tagBodyLeft + tagWidth, 0);
|
}
|
this.$store.commit("removeTag", name);
|
this.$store.commit("closePage", name);
|
pageOpenedList = this.$store.state.app.pageOpenedList;
|
localStorage.pageOpenedList = JSON.stringify(pageOpenedList);
|
if (this.currentPageName == name) {
|
this.linkTo(lastPageObj);
|
}
|
},
|
linkTo(item) {
|
if (this.$route.name == item.name) {
|
return;
|
}
|
let routerObj = {};
|
routerObj.name = item.name;
|
if (item.argu) {
|
routerObj.params = item.argu;
|
}
|
if (item.query) {
|
routerObj.query = item.query;
|
}
|
if (this.beforePush(item)) {
|
this.$router.push(routerObj);
|
}
|
},
|
handlescroll(e) {
|
var type = e.type;
|
let delta = 0;
|
if (type == "DOMMouseScroll" || type == "mousewheel") {
|
delta = e.wheelDelta ? e.wheelDelta : -(e.detail || 0) * 40;
|
}
|
let left = 0;
|
if (delta > 0) {
|
left = Math.min(0, this.tagBodyLeft + delta);
|
} else {
|
if (
|
this.$refs.scrollCon.offsetWidth - 100 <
|
this.$refs.scrollBody.offsetWidth
|
) {
|
if (
|
this.tagBodyLeft <
|
-(
|
this.$refs.scrollBody.offsetWidth -
|
this.$refs.scrollCon.offsetWidth +
|
this.paddingRight
|
)
|
) {
|
left = this.tagBodyLeft;
|
} else {
|
left = Math.max(
|
this.tagBodyLeft + delta,
|
this.$refs.scrollCon.offsetWidth -
|
this.$refs.scrollBody.offsetWidth -
|
this.paddingRight
|
);
|
}
|
} else {
|
this.tagBodyLeft = 0;
|
}
|
}
|
this.tagBodyLeft = left;
|
},
|
handleTagsOption(type) {
|
if (type == "clearAll") {
|
this.$store.commit("clearAllTags");
|
this.$router.push({
|
name: "home_index",
|
});
|
} else {
|
this.$store.commit("clearOtherTags", this);
|
}
|
this.tagBodyLeft = 0;
|
},
|
moveToView(tag) {
|
if (tag.offsetLeft < -this.tagBodyLeft) {
|
// 标签在可视区域左侧
|
this.tagBodyLeft = -tag.offsetLeft + 10;
|
} else if (
|
tag.offsetLeft + 10 > -this.tagBodyLeft &&
|
tag.offsetLeft + tag.offsetWidth <
|
-this.tagBodyLeft +
|
this.$refs.scrollCon.offsetWidth -
|
this.paddingRight
|
) {
|
// 标签在可视区域
|
this.tagBodyLeft = Math.min(
|
0,
|
this.$refs.scrollCon.offsetWidth -
|
this.paddingRight -
|
tag.offsetWidth -
|
tag.offsetLeft -
|
20
|
);
|
} else {
|
// 标签在可视区域右侧
|
this.tagBodyLeft = -(
|
tag.offsetLeft -
|
(this.$refs.scrollCon.offsetWidth -
|
this.paddingRight -
|
tag.offsetWidth) +
|
20
|
);
|
}
|
},
|
},
|
mounted() {
|
this.refsTag = this.$refs.tagsPageOpened;
|
setTimeout(() => {
|
this.refsTag.forEach((item, index) => {
|
if (this.$route.name == item.name) {
|
let tag = this.refsTag[index].$el;
|
this.moveToView(tag);
|
}
|
});
|
}, 1); // 这里不设定时器就会有偏移bug
|
this.tagsCount = this.tagsList.length;
|
},
|
watch: {
|
$route(to) {
|
this.currentPageName = to.name;
|
this.$nextTick(() => {
|
this.refsTag.forEach((item, index) => {
|
if (to.name == item.name) {
|
let tag = this.refsTag[index].$el;
|
this.moveToView(tag);
|
}
|
});
|
});
|
this.tagsCount = this.tagsList.length;
|
},
|
},
|
};
|
</script>
|
|
<style lang="less">
|
.tags-scroll-content {
|
position: relative;
|
box-sizing: border-box;
|
width: 100%;
|
height: 40px;
|
z-index: 0;
|
overflow: hidden;
|
background: #f0f2f5;
|
padding-right: 40px;
|
|
.tags-scroll-body {
|
position: absolute;
|
padding: 2px 10px;
|
overflow: visible;
|
white-space: nowrap;
|
transition: left 0.3s ease;
|
// 自定义Tag样式
|
.ivu-tag {
|
font-size: 14px;
|
padding: 0 16px;
|
.ivu-icon-ios-close {
|
font-size: 16px;
|
margin-left: 3px !important;
|
margin-right: -5px;
|
top: 0px;
|
}
|
.ivu-tag-text {
|
color: #74788d;
|
transition: all 0.2s ease-in-out;
|
}
|
&:hover {
|
.ivu-tag-text {
|
color: #2d8cf0;
|
}
|
}
|
}
|
.ivu-tag-primary .ivu-tag-text {
|
color: #2d8cf0;
|
}
|
.ivu-tag-dot-inner {
|
display: none;
|
}
|
}
|
|
.close-tag-content {
|
position: absolute;
|
right: 0;
|
top: 0;
|
.icon-content {
|
background: white;
|
box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
|
z-index: 10;
|
width: 40px;
|
height: 40px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
cursor: pointer;
|
}
|
}
|
}
|
.close-tag-dropdown {
|
right: 5px !important;
|
}
|
</style>
|
