lei.jiang
parent
69860c48b0
commit
52e1afa2f2
|
|
@ -3,6 +3,10 @@
|
|||
<div class="scroll-wrapper" ref="scrollWrapper" :style="{left: left + 'px'}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="bar-container" v-show="isOverflow" ref="scrollbarContainer">
|
||||
<div class="scrollbar" ref="scrollbar">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -11,41 +15,83 @@ export default {
|
|||
name: 'scrollPane',
|
||||
data() {
|
||||
return {
|
||||
left: 0
|
||||
left: 0,
|
||||
isOverflow: false,
|
||||
container: undefined,
|
||||
containerWidth: undefined,
|
||||
wrapper: undefined,
|
||||
wrapperWidth: undefined,
|
||||
scrollbarContainer: undefined,
|
||||
scrollbarContainerWidth: undefined,
|
||||
scrollbar: undefined,
|
||||
scrollbarWidth: undefined
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.container = this.$refs.scrollContainer
|
||||
this.wrapper = this.$refs.scrollWrapper
|
||||
this.scrollbarContainer = this.$refs.scrollbarContainer
|
||||
this.scrollbar = this.$refs.scrollbar
|
||||
this.calcSize()
|
||||
window.addEventListener('resize', () => {
|
||||
this.$forceUpdate()
|
||||
this.calcSize()
|
||||
}, false)
|
||||
},
|
||||
methods: {
|
||||
calcPos() {
|
||||
if (this.isOverflow) {
|
||||
this.scrollbar.style.left = -(this.scrollbarContainerWidth - this.scrollbarWidth) * this.left / (this.wrapperWidth - this.containerWidth + 100) + 'px'
|
||||
}
|
||||
},
|
||||
calcSize() {
|
||||
// 计算滚动条的长度
|
||||
this.containerWidth = parseFloat(this.container.offsetWidth, 10)
|
||||
this.wrapperWidth = parseFloat(this.wrapper.offsetWidth, 10)
|
||||
this.scrollbarContainerWidth = parseFloat(this.scrollbarContainer.offsetWidth, 10)
|
||||
this.isOverflow = this.wrapperWidth + 100 > this.containerWidth
|
||||
if (!this.isOverflow) return false
|
||||
this.scrollbarWidth = this.scrollbarContainerWidth * this.containerWidth / (this.wrapperWidth + 100)
|
||||
this.scrollbar.style.width = this.scrollbarWidth + 'px'
|
||||
this.calcPos()
|
||||
},
|
||||
handleScroll(e) {
|
||||
e.preventDefault()
|
||||
const $container = this.$refs.scrollContainer
|
||||
const $containerWidth = $container.offsetWidth
|
||||
const $wrapper = this.$refs.scrollWrapper
|
||||
const $wrapperWidth = $wrapper.offsetWidth
|
||||
if (e.wheelDelta > 0) {
|
||||
// 滚轮下滑
|
||||
this.left = Math.min(0, this.left + e.wheelDelta)
|
||||
} else {
|
||||
if ($containerWidth - 100 < $wrapperWidth) {
|
||||
if (this.left < -($wrapperWidth - $containerWidth + 100)) {
|
||||
this.left = this.left
|
||||
} else {
|
||||
this.left = Math.max(this.left + e.wheelDelta, $containerWidth - $wrapperWidth - 100)
|
||||
}
|
||||
} else {
|
||||
this.left = 0
|
||||
// 滚轮上滑
|
||||
// 可滑动区间[-(this.wrapperWidth-this.containerWidth+100),0]
|
||||
if (this.left >= -(this.wrapperWidth - this.containerWidth + 100)) {
|
||||
this.left = Math.max(this.left + e.wheelDelta, this.containerWidth - this.wrapperWidth - 100)
|
||||
}
|
||||
}
|
||||
this.calcPos()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.scroll-container {
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.scroll-wrapper {
|
||||
position: absolute;
|
||||
.scroll-container {
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.scroll-wrapper {
|
||||
position: absolute;
|
||||
}
|
||||
.bar-container{
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
width:100%;
|
||||
height: 5px;
|
||||
.scrollbar{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
<template>
|
||||
<scroll-pane class='tags-view-container'>
|
||||
<router-link class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path":key="tag.path" @contextmenu.prevent.native="openMenu(tag,$event)">
|
||||
<div class="tag-container">
|
||||
<scroll-pane class='tags-view-container' ref="pane">
|
||||
<router-link class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path":key="tag.path" @contextmenu.prevent.native="openMenu(tag,$event)" v-Clickoutside="closeMenu">
|
||||
{{$t('route.'+tag.title)}}
|
||||
<span class='el-icon-close' @click='closeViewTags(tag,$event)'></span>
|
||||
</router-link>
|
||||
</scroll-pane>
|
||||
<ul class='contextmenu' v-show="open" :style="{left:left+'px',top:top+'px'}">
|
||||
<li @click="closePage(0,$event)">关闭</li>
|
||||
<li @click="closePage(1,$event)">关闭其他</li>
|
||||
<li @click="closePage(2,$event)">关闭所有</li>
|
||||
</ul>
|
||||
</scroll-pane>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -27,6 +29,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
open: false,
|
||||
isOverflow: false,
|
||||
top: 0,
|
||||
left: 0,
|
||||
isSelect: {}
|
||||
|
|
@ -35,6 +38,9 @@ export default {
|
|||
mounted() {
|
||||
this.addViewTags()
|
||||
},
|
||||
updated() {
|
||||
this.$nextTick(this.$refs.pane.calcSize())
|
||||
},
|
||||
methods: {
|
||||
closeViewTags(view, $event) {
|
||||
this.$store.dispatch('delVisitedViews', view).then((views) => {
|
||||
|
|
@ -82,8 +88,8 @@ export default {
|
|||
openMenu(tag, e) {
|
||||
this.open = true
|
||||
this.isSelect = tag
|
||||
this.left = e.clientX - document.querySelector('.main-container').offsetLeft
|
||||
this.top = e.clientY - document.querySelector('.tags-view-container').offsetTop
|
||||
this.left = e.clientX
|
||||
this.top = e.clientY
|
||||
},
|
||||
closeMenu() {
|
||||
this.open = false
|
||||
|
|
@ -98,62 +104,64 @@ export default {
|
|||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.tags-view-container {
|
||||
background: #fff;
|
||||
height: 34px;
|
||||
border-bottom: 1px solid #d8dce5;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
|
||||
.contextmenu{
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
z-index: 99999;
|
||||
position:absolute;
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
border: 1px solid rgba(0,0,0,0.4);
|
||||
font-size: 0.8rem;
|
||||
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .5);
|
||||
li{
|
||||
.tag-container {
|
||||
.contextmenu {
|
||||
margin: 0;
|
||||
padding: 0.2rem 1.5rem 0.3rem 0.8rem;
|
||||
&:hover{
|
||||
background: #eee;
|
||||
cursor: default;
|
||||
background: #fff;
|
||||
z-index: 99999;
|
||||
position: absolute;
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
border: 1px solid rgba(0, 0, 0, 0.4);
|
||||
font-size: 0.8rem;
|
||||
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .5);
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0.2rem 1.5rem 0.3rem 0.8rem;
|
||||
&:hover {
|
||||
background: #eee;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tags-view-item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border: 1px solid #d8dce5;
|
||||
color: #495060;
|
||||
background: #fff;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
margin-top: 4px;
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
}
|
||||
&.active {
|
||||
background-color: #42b983;
|
||||
color: #fff;
|
||||
border-color: #42b983;
|
||||
&::before {
|
||||
content: '';
|
||||
background: #fff;
|
||||
.tags-view-container {
|
||||
background: #fff;
|
||||
height: 34px;
|
||||
border-bottom: 1px solid #d8dce5;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
|
||||
.tags-view-item {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin-right: 2px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border: 1px solid #d8dce5;
|
||||
color: #495060;
|
||||
background: #fff;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
margin-top: 4px;
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
}
|
||||
&.active {
|
||||
background-color: #42b983;
|
||||
color: #fff;
|
||||
border-color: #42b983;
|
||||
&::before {
|
||||
content: '';
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
|
|
@ -179,4 +187,5 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue