Vue3封装一个高级面包屑组件（2）

                接着上一篇我们封装的面包屑组件性能比较差、灵活度不强，所以这次我们封装一个高级组件，适用于多级场合

这次我们先封装两个组件

bread.vue以及bread-item.vue

bread-item.vue

<template>
  <div class="xtx-bread-item">
    <RouterLink v-if="to" :to="to"><slot /></RouterLink>
    <span v-else><slot /></span>
    <i class="iconfont icon-angle-right"></i>
  </div>
</template>
<script>
export default {
  name: 'XtxBreadItem',
  props: {
    to: {
      type: [String, Object]
    }
  }
}
</script>

brand.vue

<template>
  <div class='xtx-bread'>
    <slot />
  </div>
</template>

<script>
export default {
  name: 'XtxBread'
}
<style scoped lang='less'>
.xtx-bread{
  display: flex;
  padding: 25px 10px;
  :deep(&-item) {
    a {
      color: #666;
      transition: all .4s;
      &:hover {
        color: @xtxColor;
      }
    }
  }
 :deep(i) {
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px;
  }
}
</style>

注：这里的样式我们需要用到deep，才可以深度检测到样式

使用

<!-- 面包屑 -->
<XtxBread>  
  <XtxBreadItem to="/">首页</XtxBreadItem>   
  <XtxBreadItem to="/category/1005000">电器</XtxBreadItem>   
  <XtxBreadItem >空调</XtxBreadItem>
</XtxBread>

 

这样封装可以实现多级显示，但是也有一个缺陷就是在最后一级的尖括号不需要，但缺展示出来了，这个问题怎么解决呢。我们将在下一次的终极版实现，敬请期待~~~