1

lzhe

2024-06-05 fc15f2e904fade9e1505bad70b29829d7d99c124

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<template>
    <div class="adminui-topbar">
        <!-- 面包屑 -->
        <!-- <div class="left-panel">
            <el-breadcrumb separator-icon="el-icon-arrow-right" class="hidden-sm-and-down">
                <transition-group name="breadcrumb">
                    <template v-for="item in breadList" :key="item.title" >
                        <el-breadcrumb-item v-if="item.path!='/' &&  !item.meta.hiddenBreadcrumb" :key="item.meta.title"><el-icon class="icon" v-if="item.meta.icon"><component :is="item.meta.icon" /></el-icon>{{item.meta.title}}</el-breadcrumb-item>
                    </template>
                </transition-group>
            </el-breadcrumb>
        </div> -->
        <div class="center-panel"></div>
        <div class="right-panel">
            <slot></slot>
        </div>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                breadList: []
            }
        },
        created() {
            this.getBreadcrumb();
        },
        watch: {
            $route() {
                this.getBreadcrumb();
            }
        },
        methods: {
            getBreadcrumb(){
                let matched = this.$route.meta.breadcrumb;
                this.breadList = matched;
            }
        }
    }
</script>
 
<style scoped>
    .el-breadcrumb {margin-left: 15px;}
    .el-breadcrumb .el-breadcrumb__inner .icon {font-size: 14px;margin-right: 5px;float: left;}
    .breadcrumb-enter-active,.breadcrumb-leave-active {transition: all 0.3s;}
    .breadcrumb-enter-from,.breadcrumb-leave-active {opacity: 0;transform: translateX(20px);}
    .breadcrumb-leave-active {position: absolute;}
</style>