vue-template-admin改造tabs

vue-template-admin的tabs，如何将其改造成左右按钮控制滚动且滚动过程中不遮挡tabs项的效果

一个简单的思路：

在tabs组件外层加上一个div，使用display: flex和overflow-x: scroll来实现水平滚动。

在tabs组件外层加上左右按钮。

通过点击左右按钮来控制tabs组件的滚动。

使用JavaScript代码来控制tabs组件的滚动。

使用transition来实现滚动过程中不遮挡tabs项的效果

下面是一个简单的代码示例：

<template>
  <div class="tabs-container">
    <div class="tabs-scroll-container" ref="tabsContainer">
      <div class="tabs">
        <template v-for="(item, index) in tabs">
          <tab :key="item.name" :name="item.name" :label="item.label" :closable="item.closable"></tab>
        </template>
      </div>
    </div>
    <button class="tabs-btn tabs-prev-btn" @click="scrollPrev"></button>
    <button class="tabs-btn tabs-next-btn" @click="scrollNext"></button>
  </div>
</template>

<script>
export default {
  methods: {
    scrollPrev() {
      this.$refs.tabsContainer.scrollLeft -= 100
    },
    scrollNext() {
      this.$refs.tabsContainer.scrollLeft += 100
    }
  }
}
</script>

<style>
.tabs-container {
  position: relative;
}
.tabs-scroll-container {
  overflow-x: scroll;
  display: flex;
}
.tabs-btn {
  position: absolute;
  top: 0;
  height: 100%;
  width: 40px;
  background: #f5f7fa;
  border: none;
  outline: none;
}
.tabs-prev-btn {
  left: 0;
}
.tabs-next-btn {
  right: 0;
}
</style>

• 你看下这篇博客吧, 应该有用👉 ：vue-admin-template模板、解决跨域问题
• 除此之外, 这篇博客: Vue造轮子-Tabs测试(下)中的 2. 下面开始测tabs的属性 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  
• • 先测selected属性

      // tabs-items.vue加上:data-name="name"变得更好测试点
      <template>
          <div class="tabs-item" @click="onClick" :class="classes" :data-name="name">
              <slot></slot>
          </div>
      </template>
      // tabs.test.js 异步代码测试比较麻烦
      vm.$nextTick(()=>{
        let x = vm.$el.querySelector('.tabs-item[data-name]="${finance}"')
        expect(x.classList.contains('active')).to.be.true
        done()
      })