效果图
子组件
<template>
<div class="tag-box">
<div class="tag-list">
<ul ref="tagList" :style="{ left: -nowLeft + 'px' }">
<li
v-for="(item, index) in list"
:key="index"
:ref="'li' + index"
@click="onClickActive(item)"
>
<span class="tag" :class="{ 'tag-active': id === item.id }">
{{ item.title }}
</span>
</li>
</ul>
</div>
<i
type="left"
class="el-icon-caret-left"
v-show="showLf"
@click="handleLeft"
/>
<i
type="right"
class="el-icon-caret-right"
v-show="showRt"
@click="handleRight"
/>
</div>
</template>
<script>
export default {
props: {
list: Array,
},
data() {
return {
id: 0,
nowNum: 0, // 滚动了几次
showLf: false, // 左侧按钮 显隐
showRt: false, // 右侧按钮 显隐
allWidth: 0, // 内容总宽
nowLeft: 0,
nowIndex: 0, // 显示部分的第一个index
};
},
methods: {
onClickActive(data) {
this.id = data.id;
this.$emit("onclose", data);
},
handleLeft() {
if (this.nowLeft > 0) {
this.nowNum--;
this.showRt = true;
if (this.nowNum > 0) {
let nw = 0;
for (let j = this.list.length; j >= 0; j--) {
if (j < this.nowIndex) {
nw += this.$refs["li" + j][0].offsetWidth;
if (nw >= 220) {
nw -= this.$refs["li" + j][0].offsetWidth;
this.nowLeft -= nw;
this.nowIndex = j + 1;
break;
}
}
}
} else {
this.nowLeft = 0;
this.nowIndex = 0;
this.showLf = false;
}
}
},
handleRight() {
if (this.nowLeft + 220 < this.allWidth) {
this.nowNum++;
this.showLf = true;
let nw = 0;
for (let i = 0; i < this.list.length; i++) {
if (i >= this.nowIndex) {
nw += this.$refs["li" + i][0].offsetWidth;
if (nw > 220) {
nw -= this.$refs["li" + i][0].offsetWidth;
this.nowLeft += nw;
this.nowIndex = i;
break;
}
}
}
if (this.nowLeft + 220 >= this.allWidth) {
this.showRt = false;
}
}
},
},
mounted() {
this.$nextTick(() => {
this.allWidth = this.$refs.tagList.offsetWidth;
if (this.allWidth > 220) {
// 220为固定宽度
this.showRt = true;
}
});
},
};
</script>
<style lang="scss" scoped>
.tag-box {
width: 260px;
padding: 0 20px;
height: 28px;
position: relative;
.tag-list {
width: 220px;
height: 100%;
line-height: 32px;
overflow: hidden;
position: relative;
ul {
transition-duration: 0.3s;
position: absolute;
top: 0px;
left: 0px;
margin: 0;
padding: 0;
display: flex;
flex-wrap: nowrap;
li {
white-space: nowrap;
display: inline-block;
white-space: nowrap;
padding: 0 10px;
}
li:first-child {
padding-left: 0;
}
li:last-child {
padding-right: 0;
}
}
.tag {
cursor: pointer;
display: inline-block;
height: 28px;
// line-height: 28px;
transition: border-color 0.2s;
font-size: 14px;
&:hover {
color: #1890ff;
}
}
.tag-active {
color: #1890ff;
border-bottom: 2px solid #1890ff;
}
}
.el-icon-caret-left {
cursor: pointer;
line-height: 28px;
position: absolute;
left: 5px;
top: 2px;
}
.el-icon-caret-right {
line-height: 28px;
cursor: pointer;
position: absolute;
right: 5px;
top: 2px;
}
}
</style>
父组件
<template>
<div class="app-container">
<Tags :list="list" @onclose="onClickActive"></Tags>
</div>
</template>
<script>
import Tags from "../../components-demo/Tags";
export default {
components: {
Tags
},
data() {
return {
list: [
{ id: 0, title: "区域分组", name: "qyfz" },
{ id: 1, title: "移动设备", name: "ydsb" },
{ id: 2, title: "业务分组", name: "ywfz" },
{ id: 3, title: "电压分组", name: "dyfz" },
{ id: 4, title: "我的视图", name: "wdst" },
]
};
},
methods: {
//子组件回调方法
onClickActive(data) {
let id = data.id;
this.activeName = data.name;
if (id == 0) {
//具体的业务实现
} else if (id == 1) {
//具体的业务实现
}
},
}
};
</script>
但也要根据实际的开发需求修改,当做记录也希望帮到有需要的你。