Vue3 + Element-UI 实现动态 Tab 页框架

安装 Element-UI

首先，我们需要安装 Element-UI。在终端中输入以下命令：

npm install element-plus

创建 Tab 页组件

在 src/components 目录下创建一个名为 Tabs.vue 的组件文件。代码如下：

<template>
  <div>
    <el-tabs v-model='activeName' @tab-click='handleClick'>
      <el-tab-pane label='Tab 1' name='1'>Content of Tab Pane 1</el-tab-pane>
      <el-tab-pane label='Tab 2' name='2'>Content of Tab Pane 2</el-tab-pane>
      <el-tab-pane label='Tab 3' name='3'>Content of Tab Pane 3</el-tab-pane>
    </el-tabs>
  </div>
</template>

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

export default {
  setup() {
    const activeName = ref('1');

    const handleClick = (tab) => {
      console.log(tab);
    };

    return {
      activeName,
      handleClick,
    };
  }
}
</script>

在这个组件中，我们使用了 Element-UI 的 <el-tabs> 和 <el-tab-pane> 组件来创建 tab 页。v-model='activeName' 用来绑定当前激活的 tab 页的名称，@tab-click='handleClick' 用来监听 tab 页的点击事件。在 setup() 函数中，我们使用了 Vue3 的 ref 函数来创建一个响应式的 activeName 变量，并定义了一个 handleClick 函数来处理 tab 页的点击事件。

在 App.vue 中使用 Tabs 组件

我们在 App.vue 组件中导入并使用 Tabs 组件。代码如下：

<template>
  <div id='app'>
    <Tabs />
  </div>
</template>

<script>
import Tabs from './components/Tabs.vue';

export default {
  name: 'App',
  components: {
    Tabs
  }
};
</script>

现在，我们可以在浏览器中看到一个带有三个 tab 页的页面。

添加动态 Tab 页

我们可以通过在 <el-tabs> 组件中动态添加 <el-tab-pane> 组件来创建动态 tab 页。在 Tabs.vue 组件中添加以下代码：

<template>
  <div>
    <el-tabs v-model='activeName' @tab-click='handleClick'>
      <el-tab-pane label='Tab 1' name='1'>Content of Tab Pane 1</el-tab-pane>
      <el-tab-pane label='Tab 2' name='2'>Content of Tab Pane 2</el-tab-pane>
      <el-tab-pane label='Tab 3' name='3'>Content of Tab Pane 3</el-tab-pane>
      <el-tab-pane v-for='(item, index) in tabs' :key='index' :label='item.label' :name='item.name'>{{ item.content }}</el-tab-pane>
    </el-tabs>
  </div>
</template>

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

export default {
  setup() {
    const activeName = ref('1');
    const tabs = ref([
      { label: 'Tab 4', name: '4', content: 'Content of Tab Pane 4' },
      { label: 'Tab 5', name: '5', content: 'Content of Tab Pane 5' },
      { label: 'Tab 6', name: '6', content: 'Content of Tab Pane 6' },
    ]);

    const handleClick = (tab) => {
      console.log(tab);
    };

    return {
      activeName,
      tabs,
      handleClick,
    };
  }
}
</script>

在这个代码中，我们通过 <el-tab-pane> 组件的 v-for 指令来动态创建 tab 页。在 setup() 函数中，我们使用了 Vue3 的 ref 函数来创建一个响应式的 tabs 变量，用来存储动态 tab 页的信息。

现在，我们可以在 tabs 数组中添加新的 tab 页信息，然后在浏览器中看到它们被动态添加到页面中。

添加关闭按钮

我们可以在每个 tab 页的标题栏上添加一个关闭按钮，以便用户可以关闭它们。在 Tabs.vue 组件中添加以下代码：

<template>
  <div>
    <el-tabs v-model='activeName' @tab-click='handleClick'>
      <el-tab-pane label='Tab 1' name='1'>Content of Tab Pane 1</el-tab-pane>
      <el-tab-pane label='Tab 2' name='2'>Content of Tab Pane 2</el-tab-pane>
      <el-tab-pane label='Tab 3' name='3'>Content of Tab Pane 3</el-tab-pane>
      <el-tab-pane v-for='(item, index) in tabs' :key='index' :label='item.label' :name='item.name'>
        {{ item.content }}
        <span class='close-tab' @click='closeTab(index)'>x</span>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

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

export default {
  setup() {
    const activeName = ref('1');
    const tabs = ref([
      { label: 'Tab 4', name: '4', content: 'Content of Tab Pane 4' },
      { label: 'Tab 5', name: '5', content: 'Content of Tab Pane 5' },
      { label: 'Tab 6', name: '6', content: 'Content of Tab Pane 6' },
    ]);

    const handleClick = (tab) => {
      console.log(tab);
    };

    const closeTab = (index) => {
      tabs.value.splice(index, 1);
    };

    return {
      activeName,
      tabs,
      handleClick,
      closeTab,
    };
  }
}
</script>

<style>
.close-tab {
  position: absolute;
  top: 6px;
  right: 10px;
  cursor: pointer;
  color: #999;
}
.close-tab:hover {
  color: #333;
}
</style>

在这个代码中，我们在每个 tab 页的内容区域中添加了一个关闭按钮。可以看到，我们在 setup() 函数中定义了一个 closeTab 函数，用来从 tabs 数组中删除指定的 tab 页。我们还为关闭按钮添加了一些 CSS 样式。

现在，我们可以在浏览器中看到每个 tab 页的标题栏上都有一个关闭按钮，点击它们可以关闭相应的 tab 页。