用代码实现一个el-tabs 淡隐淡显的页面

好的，这里给出一个简单的实现代码：

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane name="tab1">
        <div class="fade-in" v-show="activeName === 'tab1'">
          Tab1
        </div>
      </el-tab-pane>
      <el-tab-pane name="tab2">
        <div class="fade-in" v-show="activeName === 'tab2'">
          Tab2
        </div>
      </el-tab-pane>
      <el-tab-pane name="tab3">
        <div class="fade-in" v-show="activeName === 'tab3'">
          Tab3
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'tab1'
    };
  },
  methods: {
    handleTabClick(tab) {
      // 选中当前tab后隐藏其他tab的内容
      this.$el.querySelectorAll('.fade-in').forEach(item => {
        if (item.parentNode.getAttribute('name') !== tab.name) {
          item.classList.remove('fade-in');
          item.classList.add('fade-out');
          setTimeout(() => {
            item.style.display = 'none';
          }, 500);
        }
      });
      // 显示当前tab的内容
      const activePane = this.$el.querySelector(`div[name=${tab.name}]`);
      activePane.style.display = 'block';
      activePane.classList.remove('fade-out');
      activePane.classList.add('fade-in');
    }
  },
};
</script>

<style>
.fade-in {
  animation: fadeIn 0.5s;
}

.fade-out {
  animation: fadeOut 0.5s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>

在该代码中，使用了 `el-tabs` 组件实现了选项卡，用 `v-model` 双向绑定 `activeName` 来控制显示哪个选项卡的内容。在选项卡切换时，通过 `handleTabClick` 方法来实现淡隐淡显的效果：

- 选中当前的选项卡后，遍历所有选项卡的内容，隐藏非当前选项卡的内容。
- 显示当前选项卡的内容，通过 `fade-in` 和 `fade-out` 类来控制淡入淡出的动画效果。

同时在 `style` 中定义了 `fade-in` 和 `fade-out` 类的动画效果。