el-tabs 实现切换 要切换效果代码

el-tabs 是 Element UI 提供的标签页组件，它本身已经提供了基本的切换效果，不需要额外编写代码。当用户点击不同的标签页时，el-tabs 会自动切换到对应的内容区域，并且带有默认的淡入淡出效果。

如果你想要自定义 el-tabs 的切换效果，可以通过覆盖默认的 CSS 样式来实现。比如，你可以使用 CSS3 的过渡效果来实现更加流畅的切换效果，或者使用动画库来添加更加华丽的动画效果。

以下是一个使用 CSS3 过渡效果来实现 el-tabs 切换的示例代码：

<template>
  <el-tabs v-model="activeTab" @tab-click="handleTabClick">
    <el-tab-pane label="Tab 1">Content of Tab Pane 1</el-tab-pane>
    <el-tab-pane label="Tab 2">Content of Tab Pane 2</el-tab-pane>
    <el-tab-pane label="Tab 3">Content of Tab Pane 3</el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'Tab 1'
    };
  },
  methods: {
    handleTabClick(tab) {
      const tabs = document.querySelectorAll('.el-tabs__item');
      const tabContents = document.querySelectorAll('.el-tab-pane');

      tabs.forEach((el) => {
        el.classList.remove('active');
      });
      tabContents.forEach((el) => {
        el.classList.remove('active');
      });

      tab.$el.classList.add('active');
      const content = document.querySelector(`.el-tab-pane[aria-label="${tab.label}"]`);
      content.classList.add('active');
    }
  }
};
</script>

<style lang="scss">
.el-tabs__item {
  transition: all 0.3s ease-in-out;
  &.active {
    transform: scale(1.1);
  }
}

.el-tab-pane {
  transition: all 0.3s ease-in-out;
  &.active {
    opacity: 1;
    transform: translateY(0);
  }
  &:not(.active) {
    opacity: 0;
    transform: translateY(-20px);
  }
}
</style>

在这个示例中，我们通过覆盖 el-tabs 的默认样式，使用 CSS3 过渡效果来实现切换效果。当用户点击不同的标签页时，标签页会放大 10%，同时内容区域会从上方滑入，给人一种更加流畅的切换体验。