vue-template-admin改造tabs

Question

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

Answer 1

一个简单的思路：

在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>