• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue实现tab标签(标签超出自动滚动)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

当创建的tab标签超出页面可视区域时自动滚动一个tab标签距离,并可手动点击滚动tab标签,实现效果请看GIF图

效果预览GIF图

<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实现tab标签(标签超出自动滚动)的文章就介绍到这了,更多相关vue tab标签 内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
如何在在Vue3中使用markdown 编辑器组件发布时间:2022-02-05
下一篇:
vue圆环百分比进度条组件功能的实现发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap