為什么我復(fù)制你的代碼報錯了,我自己加了一個 js,less,cdn鏈接

這個很簡單 完全可以自己寫一個.
給你一個自己寫的組件參考

<!--
:tabItems tab項集合，[{name, isActive}...]，name用于顯示，isActive表示是否選中，可以自定義其它屬性，chang事件觸發(fā)時會將整個對象拋出
:displayProp  自定義顯示字段
@change   事件，當(dāng)tab項被點(diǎn)擊選中時觸發(fā)，參數(shù)：tabItem
ref.setActive(index)  外部設(shè)置選中方法，不會觸發(fā)change事件
ref.setPosition 根據(jù)選中項重置位置
-->
<style rel="stylesheet/less" lang="less">
    @checked-color: #4179FF;
    @text-color: #3B435A;
    .slide-tab {
        width: auto;
        white-space: nowrap;
        background: #FFFFFF;
        box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.10);
        overflow-x: scroll;
        overflow-y: hidden;
        &::-webkit-scrollbar {
            display: none;
        }
        .slide-item {
            display: inline-block;
            position: relative;
            padding: 15px;
            font-size: 16px;
            color: @text-color;
        }
        .item-checked{
            color: @checked-color;
        }
        .slide-check {
            position: absolute;
            bottom: 0;
            left: 50%;
            height: 3px;
            width: 0;
            transform: translateX(-50%);
            color: @checked-color;
            background: @checked-color;
            transition: all .2s;
        }
        .is-check {
            width: 20px;
        }

    }
</style>
<template>
    <div>
        <div class="slide-tab" ref="slideTab">
            <div class="slide-item" :class="{'item-checked': index === activeIndex}" v-for="(item,index) in tabItems" @click="slide(index)">
                {{item}}
                <div class="slide-check" :class="{'is-check': index === activeIndex}"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            tabItems: {
                type: Array,
                default(){
                    return ['標(biāo)題一', '標(biāo)題二', '標(biāo)題三', '標(biāo)題四', '標(biāo)題五', '標(biāo)題六']
                }
            }
        },
        data() {
            return {
                activeIndex: 0
            }
        },
        methods: {
            slide(index){
                this.activeIndex = index;
                let activeDom = document.getElementsByClassName('slide-item')[index];
                this.$refs.slideTab.scrollLeft = activeDom.offsetLeft;
                this.$emit('on-change', index);
            }
        },
        mounted() {
        }
    }
</script>