点击箭头,标签内容可左右移动,每次移动一个盒子的宽度,若数据长度不够则移动到最有一个(或者第一个的位置)
<template> 中的代码
<div class="tags-list" ref="totalLists">
<div class="arrow-icon" @click="arrowBack" v-if="showButton">
<svg-icon
:icon-class="'arrow-back'"
class="icon arrow-style"
></svg-icon>
</div>
<div class="tag-style" ref="tagBox">
<div
class="scrollWrapper"
ref="scrollWrapper"
id="nav"
:style="{ marginLeft: tabScroll }"
>
<el-tag
v-for="(tag, index) in tagsList"
:key="tag.name"
:closable="tag.del"
@close="handleTagsClose(tag, index)"
@click="highTags(tag, index)"
:class="index == currentTagIndex ? 'highStyle' : 'normalStyle'"
type="info"
>
{{ tag.name }}
</el-tag>
</div>
</div>
<div class="arrow-icon" @click="arrowForward" v-if="showButton">
<svg-icon
:icon-class="'arrow-forward'"
class="icon arrow-style"
></svg-icon>
</div>
</div>
data 中的数据
data() {
return {
tabScroll: "0px", // 移动的距离
tagsList: [
{
name: "工作台",
path: "workbench",
del: false,
},
{
name: "工作台",
path: "workbench",
del: false,
},
{
name: "工作台",
path: "workbench",
del: false,
}
],
showButton: false, // 标签左右两侧箭头是否显示
swiperScrollWidth: 0, // 盒子的宽度
swiperScrollContentWidth: 0, // 内容的宽度
};
}
mounted 中添加监听的代码
window.addEventListener("resize", this.checkButtonStatus);
methods 中的方法
// 标签向左切换
arrowBack() {
let tabBoxWidth = this.$refs.tagBox.clientWidth; //盒子宽度
let offsetLeft = Math.abs(this.$refs.scrollWrapper.offsetLeft); //移动距离
if (offsetLeft > tabBoxWidth) {
//移动距离大于父盒子宽度,向前移动一整个父盒子宽度
this.tabScroll = offsetLeft + tabBoxWidth + "px";
}else {
this.tabScroll = "0px";// 否则移动到开始位置
}
},
// 标签向右切换
arrowForward() {
let tabBoxWidth = this.$refs.tagBox.clientWidth; //盒子宽度
let scrollWidth = this.$refs.scrollWrapper.scrollWidth; //内容宽度
// 必须要在循环的父级添加 定位样式, offsetLeft 获取元素相对带有定位父元素左边框的偏移
let offsetLeft = Math.abs(this.$refs.scrollWrapper.offsetLeft); //移动距离
let diffWidth = scrollWidth - tabBoxWidth; //计算内容宽度与盒子宽度的差值
if (diffWidth - offsetLeft > tabBoxWidth) {
//判断差值减去移动距离是否大于盒子宽度 大于则滚动已移动距离+盒子宽度
this.tabScroll = -(offsetLeft + tabBoxWidth) + "px";
}else {
this.tabScroll = -diffWidth + "px"; //小于则移动差值距离
}
},
checkButtonStatus() {
if (!this.$refs.scrollWrapper) return;
// 盒子的宽度
let containerSize = this.$refs.tagBox.clientWidth;
// 内容的宽度
let navSize = this.$refs.scrollWrapper.scrollWidth;
if (containerSize > navSize || containerSize == navSize) {
this.showButton = false;
}else {
this.showButton = true;
}
},
<style> 中的样式
.tags-list {
margin: 4px 0;
display: flex;
align-items: center;
.tag-style {
display: flex;
align-items: center;
overflow: hidden;
pointer-events: all;
cursor: pointer;
position: relative; // 必须添加该定位,offsetLeft 获取元素相对带有定位父元素左边框的偏移
.scrollWrapper {
display: flex;
align-items: center;
overflow-x: auto;
transition:all 500ms linear
}
.scrollWrapper::-webkit-scrollbar {
height: 0;
}
.el-tag {
height: 32px;
margin-right: 4px;
cursor: pointer;
}
.el-tag.el-tag--info {
background: #fff;
color: $text-color;
}
.highStyle {
color: #1890FF !important;
font-size: 14px;
font-weight: 400;
padding: 0 16px;
}
.normalStyle {
font-size: 14px;
font-weight: 400;
padding: 0 16px;
}
}
.arrow-icon {
width: 32px;
height: 32px;
pointer-events: all;
cursor: pointer;
.arrow-style {
font-size: 16px;
padding: 0 8px;
position: relative;
top: 8px;
}
}
}