Vue3 + Element Plus 实现动态标签页及右键菜单

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane
      v-for="item in editableTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
      :closable="item.name !== '1'"
    >
    </el-tab-pane>
    <template #tab-bar>
      <tab-bar @add="addTab"></tab-bar>
    </template>
  </el-tabs>
</template>
 
<script setup>
import { ref } from 'vue';
import TabBar from './TabBar.vue';
 
const activeName = ref('1');
const editableTabs = ref([{ title: 'Tab 1', name: '1' }]);
 
const handleClick = (tab, event) => {
  console.log(tab, event);
};
 
const addTab = (target) => {
  let newTabName = (editableTabs.value.length + 1).toString();
  let newTab = {
    title: 'Tab ' + newTabName,
    name: newTabName,
  };
  if (target) {
    editableTabs.value.splice(target + 1, 0, newTab);
  } else {
    editableTabs.value.push(newTab);
  }
  activeName.value = newTabName;
};
</script>

在这个代码实例中，我们使用了Vue 3的 <script setup> 语法糖来简化组件的编写。我们定义了一个响应式的 editableTabs 数组来存储标签页的信息，并通过循环生成 el-tab-pane 组件。每个标签页都是可关闭的，但第一个标签页不可关闭。我们还实现了一个自定义的 TabBar 组件，通过插槽的方式添加到 el-tabs 的底部，用于添加新的标签页。每当添加新标签页时，我们更新 activeName 来确保新标签页被激活。这个例子展示了如何使用Element Plus组件库和Vue 3的Composition API来创建一个具有动态标签页和自定义右键菜单功能的用户界面。