<template>
  <div class="el-breadcrumb" aria-label="Breadcrumb" role="navigation">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'ElBreadcrumb',

  props: {
    separator: {
      type: String,
      default: '/'
    },
    separatorClass: {
      type: String,
      default: 'el-icon-bias'
    },
    collapse: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isCollapse: this.collapse, // 折叠开关
      num: 0,
    }
  },
  provide() {
    return {
      slots: this.$slots,
      elBreadcrumb: this,
      isCollapse: this.isCollapse, // 折叠开关
    };
  },
  created() {
    this.$on('open', () => {
      this.isCollapse  = false;
    })
  },
  mounted() {
    const items = this.$el.querySelectorAll('.el-breadcrumb__item');
    if (items.length) {
      items[items.length - 1].setAttribute('aria-current', 'page');
    }
    // 长度大于4需要折叠展示
    // 当路径层级超过 4 个级别，则第二层至倒数第三层省略。 可选择点击省略号展开，或悬停省略号显示浮层。
  },
  destroyed() {
    this.$off('open')
  }
};
                
</script>
