《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）

ElementUI 官方没有提供对鼠标中键滚动的原生支持，因此需要自行扩展或者使用原生JavaScript进行事件监听和处理。

以下是一个使用原生JavaScript来实现el-tabs组件在鼠标中键滚动时进行左右滑动的示例：

<template>
  <el-tabs v-model="activeName" @tab-click="handleTabClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
  </el-tabs>
</template>
 
<script>
export default {
  data() {
    return {
      activeName: 'first',
    };
  },
  methods: {
    handleTabClick(tab, event) {
      // 阻止默认的点击行为
      event.preventDefault();
      // 判断是否是中键点击
      if (event.button === 1) {
        // 中键滚动，这里可以添加左右滑动的逻辑
        // 例如根据 event.clientX 的位置判断滑动方向
        if (event.clientX < document.documentElement.clientWidth / 2) {
          // 向左滑动
          this.slideLeft();
        } else {
          // 向右滑动
          this.slideRight();
        }
      }
    },
    slideLeft() {
      // 左滑动逻辑
      console.log('向左滑动');
    },
    slideRight() {
      // 右滑动逻辑
      console.log('向右滑动');
    },
  },
};
</script>

在这个示例中，我们通过监听tab-click事件来判断是否是中键点击，然后通过event.button属性来判断是否是中键滚动。根据鼠标的位置或者其他条件，我们可以实现自定义的左右滑动逻辑。注意，这里的event.preventDefault()是为了防止el-tabs默认的点击行为，因为我们要自定义滑动逻辑。