使用vue怎么实现tab标签？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
<template>
<div class="main-box">
<button @click="add">添加</button>
<div class="main-box-tab">
<i @click="previous"><<</i>
<i @click="next">>></i>
<div class="main-box-tab-content" ref="tabs">
<div class="main-box-tab-roll">
<div v-for="(item,index) in tabs" :key="index"
:class="{'tab-item-action':actionName === item.name ,'tab-item':actionName !== item.name}"
@click.stop="clickTab(item.name,index)">
<span>{{item.meta.title}}</span>
<i class="el-icon-close" @click.stop="close(item.name)"></i>
</div>
</div>
</div>
</div>
<div class="main-box-content">
<div>{{actionName}}</div>
</div>
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
tabs: [],
moveX: 0,
count: 1,
unoccupied: 0,
tabsCount: 0,
actionName: 'test1'
}
},
watch: {
actionName(val) {
let len = this.tabs.length
// 如有重复数据退出后续函数执行
for (let i = 0; i < len; i++) {
if (this.tabs[i].name === val) {
this.$nextTick(() => {
this.translateX((i + 1 - this.tabsCount) * this.width - this.unoccupied)
})
return
}
}
this.tabs.push({
name: `test${this.count}`,
meta: {
title: `test${this.count}`
}
})
this.$nextTick(() => {
// (总共有多少个tabs - 未偏移时可见的元素个数) * 单个tab标签元素长度 - 被遮挡tab元素的可见部分的宽度
this.translateX((this.tabs.length - this.tabsCount) * this.width - this.unoccupied)
})
}
},
mounted() {
this.tabs.push({
name: `test${this.count}`,
meta: {
title: `test${this.count}`
}
})
this.$nextTick(() => {
let tabs = this.$refs.tabs
let getStyle = getComputedStyle(tabs.children[0].children[0], null)
let marginLeft = parseFloat(getStyle.marginLeft.substr(0, getStyle.marginLeft.length - 2))
let marginRight = parseFloat(getStyle.marginRight.substr(0, getStyle.marginRight.length - 2))
// 元素实际宽度 = 元素的宽度 + 外边距
this.width = marginLeft + marginRight + tabs.children[0].children[0].offsetWidth
/**
* 以下注释计算方式用于理解实现逻辑
**/
// // 可视区域能放入多少个元素 = 可视区域的宽度 / 子元素实际宽度
// let num = tabs.offsetWidth / this.width
// // 被遮挡tab元素的可见部分的宽度 = 可见区域的宽度 - (子元素实际宽度 * num转为整数)
// this.unoccupied = tabs.offsetWidth - (this.width * parseInt(num))
// 最终精简为取余（得数跟上面的计算是一样的）
this.unoccupied = tabs.offsetWidth % this.width
// 转为整数
this.tabsCount = parseInt(tabs.offsetWidth / this.width)
})
},
methods: {
add() {
this.count++
this.actionName = `test${this.count}`
},
/**
* 切换tab标签页
**/
clickTab(name) {
if (this.actionName !== name) {
this.actionName = name
}
},
/**
* 关闭tab标签页
**/
close(name) {
let len = this.tabs.length
let jumpName = null
if (len > 1) {
for (let i = 0; i < len; i++) {
if (this.tabs[i].name === name) {
this.tabs.splice(i, 1)
jumpName = this.tabs[i ? i - 1 : 0].name
if (this.actionName !== jumpName && name === this.actionName) {
this.actionName = jumpName
}
this.$nextTick(() => {
this.previous()
})
return
}
}
}
},
/**
* 往右偏移
**/
next() {
// scrollWidth获取不准确
// 使用this.width * this.tabs.length计算出总长度
let totalWidth = this.width * this.tabs.length
this.$nextTick(() => {
let dom = this.$refs.tabs
// 可视区域 < 滚动区域（滚动区域大于可视区域才可以移动）
// 移动距离 + 可视区域 = 滚动区域的宽度（上一次的宽度，当点击时才是实际宽度）< 滚动区域
if (dom.clientWidth < totalWidth && this.moveX + dom.clientWidth < totalWidth) {
// this.moveX为0减去空余空间的宽度
this.moveX += this.moveX ? this.width : this.width - this.unoccupied
this.translateX(this.moveX)
}
})
},
/**
* 往左偏移
**/
previous() {
if (this.moveX > 0) {
this.moveX -= this.width
this.translateX(this.moveX)
}
},
/**
* 开始移动dom
**/
translateX(x) {
this.moveX = x < 0 ? 0 : x
this.$refs.tabs.children[0].style.transform = `translateX(-${this.moveX}px)`
}
}
}
</script>
<style lang="scss" scoped>
.main-box {
height: 500px;
width: 500px;
padding: 10px 20px 20px 20px;
.main-box-tab {
position: relative;
padding: 10px 20px;
overflow: hidden;
& > i {
position: absolute;
cursor: pointer;
bottom: 15px;
&:nth-child(1) {
left: 0;
}
&:nth-child(2) {
right: 0;
}
}
.main-box-tab-content {
overflow: hidden;
.main-box-tab-roll {
transition: transform .5s;
display: flex;
align-items: center;
div {
flex-shrink: 0;
cursor: pointer;
width: 130px;
height: 25px;
margin: 0 5px;
display: flex;
align-items: center;
justify-content: space-between;
span, i {
font-size: 12px;
}
span {
margin-left: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
i {
margin-right: 10px;
}
}
}
}
.tab-item {
color: #cccccc;
background-color: rgba(255, 255, 255, .5);
border-radius: 0 1px 0 1px;
border: 1px solid #052141;
}
.tab-item-action {
color: #ffffff;
background: rgba(0, 180, 255, 0.8);
border-radius: 0 1px 0 1px;
border: 1px solid #1E2088;
}
}
.main-box-content {
height: calc(100% - 70px);
padding: 10px;
border: 1px saddlebrown solid;
background-size: 100% 100%;
}
}
</style>Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。
关于使用vue怎么实现tab标签问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
