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

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

<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>
  

< >
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;
        }
    }
};
</ >
<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就可以了～