【Element Plus】模拟浏览器页签

1. 效果

TabsDemo.gif

2. 代码

<!--Tabs.vue-->

<template>
    <el-tabs type="card" :before-leave="beforeLeave" @tab-remove="removeTab">
        <el-tab-pane label="label1" name="name1" closable></el-tab-pane>
        <el-tab-pane label="label2" name="name2" closable></el-tab-pane>
        <el-tab-pane name="add">
            <template #label>
                <el-icon><Plus /></el-icon>
            </template>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup>
import {Plus} from "@element-plus/icons-vue";

const beforeLeave = (newName) => {
    console.log("before leave");
    if (newName === "add") {
        addTab();
        return false;
    }
};

const addTab = () => {
    console.log("add tab");
};

const removeTab = (targetName) => {
    console.log("remove tab: " + targetName);
};
</script>

<style scoped>

</style>

3. 简要说明

浏览器页签效果的实现主要参考了 Element Plus 的文档和 CSDN 上的一篇文章。上述代码中函数的内容可自行补充。

以上代码写在一个单独的 .vue 文件中，定义了一个“单文件组件”。关于这方面的内容，可以参考组件基础、单文件组件以及 SFC 语法定义。

关于 <script setup> 的用法，可参考它的专门的文档。

关于如何引入 Element Plus 的图标，可以参考这篇文档。