前端用vue 实现element ui 的tabs栏按钮 超长自适应 点击按钮可实现左右滚动

在Vue中使用Element UI实现 tabs 栏的超长文字按钮并支持左右滚动，可以结合 Element UI 的 Tab 组件和一些 CSS 自定义样式来完成。以下是步骤：

1. 首先，确保已安装Element UI库，可以在`main.js`文件中引入并注册组件：

import { ElTabs, ElTabPane } from 'element-plus';

// ...其他导入
Vue.use(ElTabs);

2. 创建一个自定义的 tab 指令，用于处理按钮宽度和滚动功能，例如：

export default {
  directives: {
    scrollableBtn: {
      inserted(el, binding) {
        // 监听鼠标点击事件
        el.addEventListener('click', () => {
          const container = el.parentNode;
          if (container.scrollWidth > container.offsetWidth) {
            // 如果内容超出容器宽度，则开始滚动
            container.scrollLeft += (binding.value ? -el.clientWidth : el.clientWidth);
          }
        });
      },
      update(el, binding) {
        // 当绑定值改变时更新滚动方向
        if (binding.value === !el.scrollLeft > 0) {
          el.scrollLeft = 0;
        }
      },
    },
  },
};

然后在需要的地方使用这个指令：

<template>
  <el-tabs v-scrollable-btn="{ value: isScrolling }">
    <el-tab-pane label="这是一个很长很长的标签名，可能会超出容器宽度" name="tab1">
      <!-- 内容 -->
    </el-tab-pane>
    <!-- 更多 tab pane -->
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      isScrolling: false,
    };
  },
};
</script>

当按钮处于未选中状态（`isScrolling`为 `false`），点击会向左滚动；当按钮被选中（`isScrolling`为 `true`），则向右滚动。