<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
// 点击次数+1
this.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
// 点击次数+1
this.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
}
// 点击次数-1
this.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>
点击按钮控制滚动条滚动
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2729.html
发布的文章
css学习:轮播图
2024-03-12 01:03:35
jQuery事件处理
2024-03-12 01:03:32
ajax笔记二
2024-03-12 01:03:25
【jQuery】 第一章
2024-03-12 01:03:24
jQuery是什么?如何使用?
2024-03-12 01:03:24
前端jQuery和原生js 实现下拉框select模糊搜索功能总结
2024-03-12 01:03:24
jQuery(二①)
2024-03-12 01:03:24
JQuery前端操作JSON浅谈
2024-03-12 01:03:20
二级菜单原生js实现
2024-03-12 01:03:19
jQuery文件下载方法及引入HTML语法
2024-03-12 01:03:19
大家推荐的文章