<template>
<div class="crumbs">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <template v-for="(item,index) in breadcrumb">
        <el-breadcrumb-item v-if="item.path" :to="item.path" :key="index">{{item.name}}</el-breadcrumb-item>
        <el-breadcrumb-item v-else-if="item.href" :key="index"><a :href="item.href" target="_blank">{{item.name}}</a></el-breadcrumb-item>
        <el-breadcrumb-item v-else-if="item.goback" :key="index"><span class="goback" @click="goback">{{item.name}}</span></el-breadcrumb-item>
        <el-breadcrumb-item v-else :key="index">{{item.name || item}}</el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script>
/*
* 组件使用说明
* 基于element面包屑
* 数据格式：breadcrumb:[{
              name:'个人中心',
              path: ''
            },{
              name:'帮助中心',
              href: ''
            },{
              name:'关于商品说明'
            }]
            或
            breadcrumb:['个人中心','帮助中心','关于商品说明'],
* 字段说明：name -> 显示名称 path/href -> 跳转地址
*/
  export default {
    name:'Breadcrumb',
    data() {
        return {

        }
    },
    props:['breadcrumb'],
    methods: {
       goback(){
         this.$router.go(-1)
       },
    },
    computed: {

    },
    watch:{

    },
    created(){

    }
  }
</script>


<style lang="scss" scoped>
.goback{
  font-weight: bold;
  color: #303133;
  cursor: pointer;
  &:hover{
    color: #f60;
  }
}

</style>
