1.tags过多时，显示滚动条(不可按住滑动)
2.右键tags显示关闭多个tag的菜单 3.优化scrollPane滚轮滚动，计算偏移量的逻辑
This commit is contained in:
lei.jiang
parent
e7f626f015
commit
5487fceedc
|
|
@ -3,69 +3,114 @@
|
|||
<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>
|
||||
|
||||
<script>
|
||||
const padding = 15 // tag's padding
|
||||
const padding = 30 // tag's padding
|
||||
|
||||
export default {
|
||||
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: {
|
||||
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 - padding < $wrapperWidth) {
|
||||
if (this.left < -($wrapperWidth - $containerWidth + padding)) {
|
||||
this.left = this.left
|
||||
} else {
|
||||
this.left = Math.max(this.left + e.wheelDelta, $containerWidth - $wrapperWidth - padding)
|
||||
}
|
||||
} else {
|
||||
this.left = 0
|
||||
}
|
||||
calcPos() {
|
||||
if (this.isOverflow) {
|
||||
this.scrollbar.style.left = -(this.scrollbarContainerWidth - this.scrollbarWidth) * this.left / (this.wrapperWidth - this.containerWidth + padding) + '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 + padding > this.containerWidth
|
||||
if (!this.isOverflow) return false
|
||||
this.scrollbarWidth = this.scrollbarContainerWidth * this.containerWidth / (this.wrapperWidth + padding)
|
||||
this.scrollbar.style.width = this.scrollbarWidth + 'px'
|
||||
this.calcPos()
|
||||
},
|
||||
handleScroll(e) {
|
||||
e.preventDefault()
|
||||
if (e.wheelDelta > 0) {
|
||||
// when whell up
|
||||
this.left = Math.min(0, this.left + e.wheelDelta)
|
||||
} else {
|
||||
// when wheel down
|
||||
// this.left∈[-(this.wrapperWidth-this.containerWidth+100),0]
|
||||
if (this.left >= -(this.wrapperWidth - this.containerWidth + padding)) {
|
||||
this.left = Math.max(this.left + e.wheelDelta, this.containerWidth - this.wrapperWidth - padding)
|
||||
}
|
||||
}
|
||||
this.calcPos()
|
||||
},
|
||||
moveToTarget($target) {
|
||||
const $container = this.$refs.scrollContainer
|
||||
const $containerWidth = $container.offsetWidth
|
||||
const $targetLeft = $target.offsetLeft
|
||||
const $targetWidth = $target.offsetWidth
|
||||
|
||||
if ($targetLeft < -this.left) {
|
||||
// tag in the left
|
||||
this.left = -$targetLeft + padding
|
||||
} else if ($targetLeft + padding > -this.left && $targetLeft + $targetWidth < -this.left + $containerWidth - padding) {
|
||||
} else if ($targetLeft + padding > -this.left && $targetLeft + $targetWidth < -this.left + this.containerWidth - padding) {
|
||||
// tag in the current view
|
||||
// eslint-disable-line
|
||||
} else {
|
||||
// tag in the right
|
||||
this.left = -($targetLeft - ($containerWidth - $targetWidth) + padding)
|
||||
this.left = -($targetLeft - (this.containerWidth - $targetWidth) + padding)
|
||||
}
|
||||
this.calcSize()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.scroll-container {
|
||||
.scroll-container {
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.scroll-wrapper {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.bar-container{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width:100%;
|
||||
height: 3px;
|
||||
.scrollbar{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,.8);
|
||||
border-radius: 1.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,25 @@ const tagsView = {
|
|||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
DEL_OTHER_VIEWS: (state, view) => {
|
||||
for (const [i, v] of state.visitedViews.entries()) {
|
||||
if (v.path === view.path) {
|
||||
state.visitedViews = [].concat(state.visitedViews.slice(i, i + 1))
|
||||
break
|
||||
}
|
||||
}
|
||||
for (const i of state.cachedViews) {
|
||||
if (i === view.name) {
|
||||
const index = state.cachedViews.indexOf(i)
|
||||
state.cachedViews = [].concat(state.cachedViews.slice(index, i + 1))
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
DEL_ALL_VIEWS: (state) => {
|
||||
state.visitedViews = []
|
||||
state.cachedViews = []
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
|
|
@ -40,6 +59,18 @@ const tagsView = {
|
|||
commit('DEL_VISITED_VIEWS', view)
|
||||
resolve([...state.visitedViews])
|
||||
})
|
||||
},
|
||||
delOtherViews({ commit, state }, view) {
|
||||
return new Promise((resolve) => {
|
||||
commit('DEL_OTHER_VIEWS', view)
|
||||
resolve([...state.visitedViews])
|
||||
})
|
||||
},
|
||||
delAllViews({ commit, state }) {
|
||||
return new Promise((resolve) => {
|
||||
commit('DEL_ALL_VIEWS')
|
||||
resolve([...state.visitedViews])
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,36 @@
|
|||
<template>
|
||||
<div class="tag-container">
|
||||
<scroll-pane class='tags-view-container' ref='scrollPane'>
|
||||
<router-link ref='tag' class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path":key="tag.path">
|
||||
<router-link ref='tag' 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">
|
||||
{{generateTitle(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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ScrollPane from '@/components/ScrollPane'
|
||||
import Clickoutside from 'element-ui/src/utils/clickoutside'
|
||||
import { generateTitle } from '@/utils/i18n'
|
||||
|
||||
export default {
|
||||
components: { ScrollPane },
|
||||
directives: { Clickoutside },
|
||||
data() {
|
||||
return {
|
||||
open: false,
|
||||
isOverflow: false,
|
||||
top: 0,
|
||||
left: 0,
|
||||
isSelect: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
visitedViews() {
|
||||
return this.$store.state.tagsView.visitedViews
|
||||
|
|
@ -21,6 +39,9 @@ export default {
|
|||
mounted() {
|
||||
this.addViewTags()
|
||||
},
|
||||
updated() {
|
||||
this.$nextTick(this.$refs.scrollPane.calcSize())
|
||||
},
|
||||
methods: {
|
||||
generateTitle,
|
||||
closeViewTags(view, $event) {
|
||||
|
|
@ -36,6 +57,20 @@ export default {
|
|||
})
|
||||
$event.preventDefault()
|
||||
},
|
||||
closePage(flag, $event) {
|
||||
if (flag === 0) {
|
||||
this.closeViewTags(this.isSelect, $event)
|
||||
} else if (flag === 1) {
|
||||
this.$router.push(this.isSelect.path)
|
||||
this.$store.dispatch('delOtherViews', this.isSelect)
|
||||
$event.preventDefault()
|
||||
} else {
|
||||
this.$router.push('/')
|
||||
this.$store.dispatch('delAllViews')
|
||||
$event.preventDefault()
|
||||
}
|
||||
this.open = false
|
||||
},
|
||||
generateRoute() {
|
||||
if (this.$route.name) {
|
||||
return this.$route
|
||||
|
|
@ -62,6 +97,15 @@ export default {
|
|||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
openMenu(tag, e) {
|
||||
this.open = true
|
||||
this.isSelect = tag
|
||||
this.left = e.clientX
|
||||
this.top = e.clientY
|
||||
},
|
||||
closeMenu() {
|
||||
this.open = false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -74,7 +118,27 @@ export default {
|
|||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.tags-view-container {
|
||||
.tag-container {
|
||||
.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 {
|
||||
margin: 0;
|
||||
padding: 0.2rem 1.5rem 0.3rem 0.8rem;
|
||||
&:hover {
|
||||
background: #eee;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tags-view-container {
|
||||
background: #fff;
|
||||
height: 34px;
|
||||
border-bottom: 1px solid #d8dce5;
|
||||
|
|
@ -110,7 +174,8 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
|
|
|
|||
Loading…
Reference in New Issue