vue+elementUI实现类似浏览器打开网页的功能（页签功能）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_37695006/article/details/85092800

代码没几句，直接上个完成的例子：
 

<template>
    <div class="animated fadeIn">
        <el-card class="box-card">
            <p v-for="(nav, index) in navs" :key="index">
                <el-button type="info" @click="change(index)">{{"切换-"+nav.label}}</el-button>
            </p>
        </el-card>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="(tab, index) in tabs" :key="index" :label="tab.label" :name="tab.name">{{tab.label}}</el-tab-pane>
        </el-tabs>
    </div>
</template>
  

<script>
export default {
    mounted() {
        console.log("hello");
    },
    computed: {},
    data() {
        return {
            activeName: "first",
            tabs: [
            ],
            navs: [
                {
                    label: "用户管理",
                    name: "first"
                },
                {
                    label: "配置管理",
                    name: "second"
                },
                {
                    label: "角色管理",
                    name: "third"
                },
                {
                    label: "定时任务补偿",
                    name: "fourth"
                }
            ]
        };
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        change(index) {
            var currData = this.navs[index];
            for (let x = 0; x < this.tabs.length; x++) {
                const tab = this.tabs[x];
                if(tab.name == currData.name){
                    this.activeName = tab.name;
                    return;
                }else{
                    console.log("重复了～"); 
                }
            }
            this.tabs.push(currData);
            this.activeName = this.tabs[this.tabs.length-1].name;
        }
    }
};
</script>
<style type="text/css">
.card-block-welcome img {
    width: 100%;
    border: 1rem solid #fff;
    padding: 0 !important;
}
.welcome_bg {
    background-color: #fff;
}
</style>

如果使用自己的tabs组件，替换下el-tabs就可以了～