美文网首页
【Element Plus】模拟浏览器页签

【Element Plus】模拟浏览器页签

作者: 焜_8899 | 来源:发表于2023-11-21 23:48 被阅读0次

    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 的图标,可以参考这篇文档

    相关文章

      网友评论

          本文标题:【Element Plus】模拟浏览器页签

          本文链接:https://www.haomeiwen.com/subject/eatiwdtx.html