使用vue怎么实现tab标签

使用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}`            },                        clickTab(name) {                if (this.actionName !== name) {                    this.actionName = name                }            },                        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)                }            },                        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

Vue是一款友好的、多用途且高性能的javascript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的html、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

关于使用vue怎么实现tab标签问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程网精选频道了解更多相关知识。