vue tab组件

最新推荐文章于 2023-09-14 23:11:32 发布

fatttttt

最新推荐文章于 2023-09-14 23:11:32 发布

阅读量247

点赞数

文章标签： vue tab

本文链接：https://blog.csdn.net/fatttttt/article/details/114916542

版权

<template>
    <div class="tab-container" style="margin-top: 20px;">
        <el-tabs v-model="activeTab" style="margin-top:15px;" type="border-card" @tab-click="handleClick">
            <el-tab-pane name="base" label="'组件1显示名称'">
                <组件1 v-if="组件1显示标识 "/>
            </el-tab-pane>

            <el-tab-pane name="service" label="'组件2显示名称'">
                <组件2 v-if="组件2显示标识"/>
            </el-tab-pane>

        </el-tabs>
    </div>
</template>

<script>
    import 组件1 from "./组件1";
    import 组件2 from "./组件2";

    export default {
        name: 'Tab',
        components: {
            组件1, 组件2
        },
        data() {
            return {
                activeTab:"base",//默认选择哪个页
                组件1显示名称: true,
                组件2显示名称: false,
            }
        },
        watch: {
            activeName(val) {
                // this.$router.push(`${this.$route.path}?tab=${val}`)
            }
        },
        created() {

        },
        methods: {
            handleClick() {
                if (this.activeTab == "base") { //默认显示组件1的页
                    this.baseservice = true;
                    this.egisservice = false;
                } else if (this.activeTab == "service") {
                    this.egisservice = true;
                    this.baseservice = false;
                }
            },
        },
        mounted() {
            this.handleClick();
        },
        beforeDestroy() {
            //this.$refs.enterpriseVideo.destroyHk();
        },
        destroyed() {//页面销毁，同时也销毁video.js对象

            this.$nextTick(() => {
                //this.$refs.enterpriseVideo.destroyHk();
            })
        }
    }

</script>