elementuiplus tab 标签页左右滑动

ElementUI-Plus 中的 `el-tabs` 组件默认不支持左右滑动，但可以通过一些自定义样式来实现。

首先，需要在 `el-tabs` 外层包裹一层容器，设置容器宽度，同时隐藏容器的滚动条：

<div class="tabs-container">
  <el-tabs>
    <el-tab-pane label="Tab 1">
      <!-- Tab 1 的内容 -->
    </el-tab-pane>
    <el-tab-pane label="Tab 2">
      <!-- Tab 2 的内容 -->
    </el-tab-pane>
    <!-- 更多 Tab -->
  </el-tabs>
</div>

.tabs-container {
  width: 100%;
  overflow-x: hidden;
}

接下来，需要对 `el-tabs__nav-wrap` 元素进行一些自定义样式，使其能够支持左右滑动。具体样式如下：

.el-tabs__nav-wrap {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.3s ease-out;
}

.el-tabs__header {
  overflow-x: auto;
  scrollbar-width: none; /* 隐藏滚动条 */
  -ms-overflow-style: none; /* 隐藏滚动条 */
}

.el-tabs__header::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

上述样式中，`el-tabs__nav-wrap` 元素被设置为 flex 布局，并且禁用了换行，同时设置了 transform 过渡效果。`el-tabs__header` 元素被设置为横向滚动，同时隐藏了滚动条。

最后，在左右箭头上绑定事件，通过 JS 控制 `el-tabs__nav-wrap` 元素的 transform 属性来实现左右滑动。示例代码如下：

<template>
  <div class="tabs-container">
    <el-tabs>
      <el-tab-pane label="Tab 1">
        <!-- Tab 1 的内容 -->
      </el-tab-pane>
      <el-tab-pane label="Tab 2">
        <!-- Tab 2 的内容 -->
      </el-tab-pane>
      <!-- 更多 Tab -->
    </el-tabs>
    <div class="tabs-arrow tabs-arrow-left" @click="scroll(-1)">
      <i class="el-icon-arrow-left"></i>
    </div>
    <div class="tabs-arrow tabs-arrow-right" @click="scroll(1)">
      <i class="el-icon-arrow-right"></i>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    scroll(direction) {
      const navWrap = document.querySelector('.el-tabs__nav-wrap')
      const navWidth = navWrap.offsetWidth
      const headerWidth = document.querySelector('.el-tabs__header').offsetWidth
      const navOffsetLeft = navWrap.offsetLeft
      const minOffsetLeft = headerWidth - navWidth

      let offsetLeft = navOffsetLeft + direction * 100
      offsetLeft = Math.max(offsetLeft, minOffsetLeft)
      offsetLeft = Math.min(offsetLeft, 0)

      navWrap.style.transform = `translateX(${offsetLeft}px)`
    }
  }
}
</script>

<style>
.tabs-container {
  width: 100%;
  overflow-x: hidden;
}

.el-tabs__nav-wrap {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.3s ease-out;
}

.el-tabs__header {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.el-tabs__header::-webkit-scrollbar {
  display: none;
}

.tabs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 1;
}

.tabs-arrow-left {
  left: 10px;
}

.tabs-arrow-right {
  right: 10px;
}
</style>

上述代码中，`scroll` 方法接收一个 direction 参数，代表滑动方向。在方法中，首先获取 `el-tabs__nav-wrap` 元素的宽度、`el-tabs__header` 元素的宽度和 `el-tabs__nav-wrap` 元素的偏移量等信息，然后根据 direction 计算出滑动后的偏移量，最后将偏移量设置为 `el-tabs__nav-wrap` 元素的 transform 属性的值。左右箭头通过绝对定位来实现，点击事件绑定到 `scroll` 方法上。