<template>
    <el-breadcrumb separator="/">
    <el-breadcrumb-item>首页</el-breadcrumb-item>
    <template v-for="(crumb, index) in crumbsList" >
      <el-breadcrumb-item v-if="crumb.path" :to="{ path: crumb.path }" :key="index">{{crumb.name}}</el-breadcrumb-item>
      <el-breadcrumb-item v-else :key="index">{{crumb.name}}</el-breadcrumb-item>
    </template>
    <!-- <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
    <el-breadcrumb-item>活动列表</el-breadcrumb-item>
    <el-breadcrumb-item>活动详情</el-breadcrumb-item> -->
    </el-breadcrumb>
</template>

<script>
// import BreadCrumb from "@/components/bread-crumb";

export default {
  name: "BreadCrumb",
  props:{
    crumbs:{
        type:Array,
    }
  },
  data(){
      return{
          crumbsList:[
            {path:'/', name:'首页'}
          ],
      }
  }, 
  components: {
    // BreadCrumb
  },
  
  created(){
      this.crumbsList = this.crumbs;
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
<style lang="scss">
.el-breadcrumb__inner{
  color:#000;
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
  color:#000;
}
</style>
