merge
This commit is contained in:
commit
5a5c6153b4
|
@ -20,10 +20,8 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
handleScroll(e) {
|
handleScroll(e) {
|
||||||
const eventDelta = e.wheelDelta || -e.deltaY * 40
|
const eventDelta = e.wheelDelta || -e.deltaY * 40
|
||||||
this.scrollWrapper.scrollLeft = this.scrollWrapper.scrollLeft + eventDelta / 4
|
const $scrollWrapper = this.$refs.scrollContainer.$refs.wrap
|
||||||
},
|
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
|
||||||
scrollLeft(offsetLeft) {
|
|
||||||
this.scrollWrapper.scrollLeft = offsetLeft
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -91,20 +91,19 @@ export function getQueryObject(url) {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*get getByteLen
|
* @param {Sting} input value
|
||||||
* @param {Sting} val input value
|
|
||||||
* @returns {number} output value
|
* @returns {number} output value
|
||||||
*/
|
*/
|
||||||
export function getByteLen(val) {
|
export function byteLength(str) {
|
||||||
let len = 0
|
// returns the byte length of an utf8 string
|
||||||
for (let i = 0; i < val.length; i++) {
|
let s = str.length
|
||||||
if (val[i].match(/[^\x00-\xff]/gi) != null) {
|
for (var i = str.length - 1; i >= 0; i--) {
|
||||||
len += 1
|
const code = str.charCodeAt(i)
|
||||||
} else {
|
if (code > 0x7f && code <= 0x7ff) s++
|
||||||
len += 0.5
|
else if (code > 0x7ff && code <= 0xffff) s += 2
|
||||||
}
|
if (code >= 0xDC00 && code <= 0xDFFF) i--
|
||||||
}
|
}
|
||||||
return Math.floor(len)
|
return s
|
||||||
}
|
}
|
||||||
|
|
||||||
export function cleanArray(actual) {
|
export function cleanArray(actual) {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="tags-view-container">
|
<div class="tags-view-container">
|
||||||
<scroll-pane ref="scrollPane" class="tags-view-wrapper">
|
<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container tags-view-wrapper" @wheel.native.prevent="handleScroll">
|
||||||
<router-link
|
<router-link
|
||||||
v-for="tag in visitedViews"
|
v-for="tag in visitedViews"
|
||||||
ref="tag"
|
ref="tag"
|
||||||
|
@ -14,7 +14,7 @@
|
||||||
{{ generateTitle(tag.title) }}
|
{{ generateTitle(tag.title) }}
|
||||||
<span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
|
<span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
|
||||||
</router-link>
|
</router-link>
|
||||||
</scroll-pane>
|
</el-scrollbar>
|
||||||
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
|
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
|
||||||
<li @click="refreshSelectedTag(selectedTag)">{{ $t('tagsView.refresh') }}</li>
|
<li @click="refreshSelectedTag(selectedTag)">{{ $t('tagsView.refresh') }}</li>
|
||||||
<li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">{{
|
<li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">{{
|
||||||
|
@ -26,13 +26,10 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ScrollPane from '@/components/ScrollPane'
|
|
||||||
import { generateTitle } from '@/utils/i18n'
|
import { generateTitle } from '@/utils/i18n'
|
||||||
import path from 'path'
|
import path from 'path'
|
||||||
const tagAndTagSpacing = 4 // tagAndTagSpacing
|
const tagAndTagSpacing = 4 // tagAndTagSpacing
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { ScrollPane },
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
visible: false,
|
visible: false,
|
||||||
|
@ -114,16 +111,17 @@ export default {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
for (const tag of tags) {
|
for (const tag of tags) {
|
||||||
if (tag.to.path === this.$route.path) {
|
if (tag.to.path === this.$route.path) {
|
||||||
const $scrollContainerWidth = this.$refs.scrollPane.$el.offsetWidth
|
const $container = this.$refs.scrollContainer.$el
|
||||||
const $scrollWrapper = this.$refs.scrollPane.scrollWrapper
|
const $containerWidth = $container.offsetWidth
|
||||||
|
const $scrollWrapper = this.$refs.scrollContainer.$refs.wrap
|
||||||
|
|
||||||
const firstTag = tags[0]
|
const firstTag = tags[0]
|
||||||
const lastTag = tags[tags.length - 1]
|
const lastTag = tags[tags.length - 1]
|
||||||
|
|
||||||
if (firstTag === tag) { // Current tag is the first one
|
if (firstTag === tag) { // Current tag is the first one
|
||||||
this.$refs.scrollPane.scrollLeft(0)
|
$scrollWrapper.scrollLeft = 0
|
||||||
} else if (lastTag === tag) { // Current tag is the last one
|
} else if (lastTag === tag) { // Current tag is the last one
|
||||||
this.$refs.scrollPane.scrollLeft($scrollWrapper.scrollWidth - $scrollContainerWidth)
|
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
|
||||||
} else {
|
} else {
|
||||||
// find preTag and nextTag
|
// find preTag and nextTag
|
||||||
const currentIndex = tags.findIndex(item => item === tag)
|
const currentIndex = tags.findIndex(item => item === tag)
|
||||||
|
@ -135,10 +133,10 @@ export default {
|
||||||
// the tag's offsetLeft before of prevTag
|
// the tag's offsetLeft before of prevTag
|
||||||
const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
|
const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
|
||||||
|
|
||||||
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $scrollContainerWidth) {
|
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
|
||||||
this.$refs.scrollPane.scrollLeft(afterNextTagOffsetLeft - $scrollContainerWidth)
|
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
|
||||||
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
|
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
|
||||||
this.$refs.scrollPane.scrollLeft(beforePrevTagOffsetLeft)
|
$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -211,6 +209,10 @@ export default {
|
||||||
},
|
},
|
||||||
closeMenu() {
|
closeMenu() {
|
||||||
this.visible = false
|
this.visible = false
|
||||||
|
},
|
||||||
|
handleScroll(e) {
|
||||||
|
const eventDelta = e.wheelDelta || -e.deltaY * 40
|
||||||
|
this.$refs.scrollContainer.$refs.wrap.scrollLeft = this.$refs.scrollContainer.$refs.wrap.scrollLeft + eventDelta / 4
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -223,6 +225,20 @@ export default {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-bottom: 1px solid #d8dce5;
|
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);
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
|
||||||
|
.scroll-container {
|
||||||
|
white-space: nowrap;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
/deep/ {
|
||||||
|
.el-scrollbar__bar {
|
||||||
|
bottom: 0px;
|
||||||
|
}
|
||||||
|
.el-scrollbar__wrap {
|
||||||
|
height: 49px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.tags-view-wrapper {
|
.tags-view-wrapper {
|
||||||
.tags-view-item {
|
.tags-view-item {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
Loading…
Reference in New Issue