1. 效果
TabsDemo.gif2. 代码
<!--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 的图标,可以参考这篇文档。
网友评论