<div class="tags">// 左侧按钮<el-link :underline="false" @click="leftClick" :disabled="showLeftIcon"><div class="backColor" style="float:left;margin: 8px 0"><i class="el-icon-arrow-left" /></div></el-link>//滚动内容<div id="tags-view-container" class="tags-view-container"><scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll"><router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''":to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item":style="activeStyle(tag)" @click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"@contextmenu.prevent.native="openMenu(tag, $event)">{{tag.title }}<span style="float: right;line-height: 20px" v-if="!isAffix(tag)" class="el-icon-close"@click.prevent.stop="closeSelectedTag(tag)" /></router-link></scroll-pane><ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu"><li @click="refreshSelectedTag(selectedTag)"><i class="el-icon-refresh-right"></i> 刷新页面</li><li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><i class="el-icon-close"></i> 关闭当前</li><li @click="closeOthersTags"><i class="el-icon-circle-close"></i> 关闭其他</li><li v-if="!isFirstView()" @click="closeLeftTags"><i class="el-icon-back"></i> 关闭左侧</li><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>//右侧按钮<el-link :underline="false" @click="rightClick" :disabled="showRightIcon"><div class="backColor" style="float:right;margin: 8px 0"><i class="el-icon-arrow-right" /></div></el-link></div>//js部分export default {components: {ScrollPane },data() {return {showLeftIcon: true,showRightIcon: false,maxClickNum: 0, // 最大点击次数lastLeft: 0, // 上次滑动距离clickNum: 0, // 点击次数}},methods: {// 点击右箭头rightClick() {// 如果点击次数小于数组长度-1时，执行左滑动效果。if (this.clickNum < this.visitedViews.length - 1) {// 获取当前元素宽度+右边距let width = document.querySelectorAll('.tags-view-item')[this.clickNum].offsetWidth + 10// 获取最后一个元素距离左侧的距离+元素本身的宽度let lastItemOffsetLeft = document.getElementsByClassName('tags-view-item')[this.visitedViews.length - 1].offsetLeft + width// 获取可视区域宽度const lookWidth = document.getElementsByClassName('tags-view-wrapper')[0].clientWidth// 计算可视化区域和最后一个元素的距离之间的差值const value = lookWidth - lastItemOffsetLeft// 如果最后一个元素距离左侧的距离大于可视区域的宽度，表示最后一个元素没有出现，执行滚动效果if (lastItemOffsetLeft > lookWidth) {if (value > -width && value < 0) {// 最后一次点击// 公示：滚动距离（元素的magin-left值） = 负的它自己的长度 + 上一次滑动的距离document.getElementsByClassName('tags-view-item')[0].style.marginLeft = `${value + this.lastLeft}px`this.lastLeft = value + this.lastLeft// 点击次数+1this.clickNum += 1// 记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示this.maxClickNum = this.clickNum//最后一次禁用右箭头this.showRightIcon = true}else{// 公示：滚动距离（元素的magin-left值） = 负的它自己的长度 + 上一次滑动的距离document.getElementsByClassName('tags-view-item')[0].style.marginLeft = `${-width + this.lastLeft}px`this.lastLeft = -width + this.lastLeft// 点击次数+1this.clickNum += 1// 记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示this.maxClickNum = this.clickNum}this.showLeftIcon = false}}},// 点击左箭头leftClick() {// 当点击次数大于0时才触发，这样当点击次数clickNum等于1的到时候，clickNum--等于0.根据计算属性的判断会隐藏掉左箭头if (this.clickNum > 0) {// 获取当前元素宽度let width = document.querySelectorAll('.tags-view-item')[this.clickNum - 1].offsetWidth + 10// 公示：滚动距离（元素的magin-left值） = 它自己的长度 + 上一次滑动的距离if (this.lastLeft > -width) {// 最后一次document.getElementsByClassName('tags-view-item')[0].style.marginLeft = `0px`this.lastLeft = 0}else{document.getElementsByClassName('tags-view-item')[0].style.marginLeft = `${this.lastLeft + width}px`this.lastLeft = width + this.lastLeft}// 点击次数-1this.clickNum --// 如果点击次数小于最大点击次数，说明最后一个元素已经不在可是区域内了，显示右箭头if (this.clickNum === 0) {this.showLeftIcon = true}}this.showRightIcon = false},}}</script>// css部分<style lang="scss" scoped>//隐藏滚动条::v-deep .el-scrollbar__bar.is-horizontal {height: 0px;left: 2px;}//最外层容器.tags {display: flex;padding: 0 10px;background-color: #f8f8f8;}//按钮背景样式.backColor {border: 1px solid #E6EDF9;border-radius: 2px;background-color: #fff;width: 26px;height: 26px;padding: 4px;}//滚动内容.tags-view-container {width: 100%;overflow-x: auto;padding: 8px 10px;height: 42px;background: #F2F4F8;// box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);.tags-view-wrapper {.tags-view-item {display: inline-block;position: relative;cursor: pointer;height: 26px;width: 130px;line-height: 26px;background: #FFFFFF;box-shadow: 0 2px 4px 0 #E4E8EF;border-radius: 2px;color: #242939;padding: 0 8px;font-size: 12px;margin-right: 10px;&:first-of-type {// margin-left: 15px;}&:last-of-type {// margin-right: 15px;}&.active {background-color: #FFFFFF !important;color: #006EFF !important;border-color: #006EFF !important;}}}}</style>
