【区分vue2和vue3下的element UI Tabs 标签页组件，分别详细介绍属性，事件，方法如何使用，并举例】

在 Element UI（针对 Vue 2）和 Element Plus（针对 Vue 3）中，Tabs 标签页组件通常被称为 el-tabs。虽然两个版本在 API 和实现上可能有一些细微的差别，但基本概念和用法是相似的。下面我将分别介绍在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中如何使用 el-tabs 组件。

Vue 2 + Element UI

在 Vue 2 的 Element UI 中，el-tabs 组件用于创建标签页。

属性（Props）

• v-model 或 value：绑定当前激活标签页的 name。
• type：标签页的类型，可选值为 border-card（带边框的卡片风格）或 card（卡片风格）。
• closable：标签是否可关闭。
• addable：标签是否可增加。
• editable：标签是否同时可增删。
• tab-click：标签被点击时的触发方式，可选值为 prev（只触发前一个标签）、next（只触发后一个标签）或 both（前后都触发）。
• tab-position：标签的位置，可选值为 top、right、bottom、left。
• stretch：是否拉伸标签页填满整个容器。
• before-remove：关闭前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止关闭。

事件（Events）

• tab-click：标签被点击时触发。
• tab-remove：标签被关闭时触发。
• tab-add：标签被添加时触发（仅在 addable 或 editable 为 true 时有效）。
• tab-edit：标签被编辑时触发（仅在 editable 为 true 时有效）。

示例

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <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-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first'
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

Vue 3 + Element Plus

在 Vue 3 的 Element Plus 中，el-tabs 组件的用法与 Vue 2 的 Element UI 类似，但可能会有一些 API 变动和新增功能。

属性（Props）和事件（Events）

Element Plus 的 el-tabs 组件的大部分属性和事件与 Element UI 保持一致，但可能会有一些细微的差别或新增的属性/事件。由于 Element Plus 的更新迭代，建议参考官方文档以获取最新的属性和事件列表。

示例（假设与 Element UI 类似）

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <!-- 其他标签页 -->
  </el-tabs>
</template>

<script setup>
import { ref } from 'vue';

const activeName = ref('first');

function handleClick(tab, event) {
  console.log(tab, event);
}
</script>

注意：由于 Element Plus 还在不断发展中，具体的 API 和使用方法可能会有所不同。务必参考 Element Plus 的官方文档以获取最准确的信息和示例代码。同时，Vue 3 的 Composition API（如 setup、ref 等）在示例中有所体现，这也是 Vue 3 相较于 Vue 2 的一个主要变化。