Bread.vue 2.09 KB
<template>
    <div class="layout-assistant">
        <div class="layout-assistant-content">
            <div class='bread'>
    
                <Breadcrumb separator="/" class='el-bread'>
                    <!--<Breadcrumb-item href="{ path: '/' }">首页</Breadcrumb-item>-->
                    <Breadcrumb-item v-for='(item,index) in $route.matched' v-if="item.name">{{item.name}}</Breadcrumb-item>
                </Breadcrumb>
            </div>
            <Input class="ass-input" placeholder="API搜索">
            <Button slot="append" icon="ios-search"></Button>
            </Input>
        </div>
    
    </div>
</template>

<script>
export default {
    name: 'bread',
    data() {
        return {
            strong: ''
        }
    },
    methods: {
        showStr(pa) {
            console.log(pa);
        },
        // getPageText(name) {
        //     return name = name.replace('编辑', this.$route.query.id ? '修改' : '添加');
        // }
    },
    mounted() {

    },
    created() {
        // if (this.$route.matched.length) {
        //     var name = this.$route.matched[this.$route.matched.length - 1].name;
        //     this.strong = this.getPageText(name);
        // }
    },
    watch: {
        // $route(to, from) {
        //     this.strong = this.getPageText(to.name);
        // }
    }
}
</script>

<style scoped lang='less'>
.bread {
    height: 30px;
    line-height: 30px;
    padding-left: 15px; // background: #f5f7f9;
    float: left;
    width: 500px;
    .el-bread {
        display: inline-block; // float: right;
        text-align: right;
        line-height: 30px;
        color: #fff;
        font-size: 12px;
    }
}
.layout-assistant {
    width: 100%;
    margin: 0 auto;
    height: 50px;
    line-height: 50px;
    background: #B0C4DE;
    /*background: #657180;*/
    
}
.layout-assistant .layout-assistant-content {
    width: 95%;
    margin: 0 auto;
    padding-top: 10px;
}

.ass-input{
    width: 300px;
    float: right;
    
}

//设置导航最后一个菜单的样式
.ivu-breadcrumb span:last-child {
    // font-weight: 100;
    // color: #fff
}
</style>