In the last article we manually encapsulated a breadcrumb component, but there were still some minor issues, which we will optimize in this article. Let’s start with the breadcrumb component of Element-UI:

General steps:

  • Complete the basic functions of the breadcrumb component with the slots and encapsulation options props component, the last one with an icon.
  • The h function encapsulates the breadcrumb function with render.

We need two components, shop-bread and shop-bread-Item, to complete the dynamic display. Define individual breadcrumbs component SRC/components/library/shop – bread – item. Vue

<template>
  <div class="shop-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: 'ShopBreadItem',
  props: {
    to: {
      type: [String, Object]
    }
  }
}
</script>

Copy the code

In the library/index. Js registration

import 'XtxBreadItem' from './xtx-bread-item.vue'
export default {
  install (app) {
      app.component(XtxBreadItem.name, XtxBread)
Copy the code

In the transitional version, after completing the above steps, you will find that the structure lacks style ICONS. If you add an item, there will be ICONS, but the last one is not needed.

<template> <div class='shop-bread'> <slot /> </div> </template> <script> export default { name: 'ShopBread' } </script> <style scoped lang='less'> .shop-bread { display: flex; padding: 25px 10px; :deep(&-item) { a { color: #666; The transition: all 0.4 s; &:hover { color: @shopColor; } } } :deep(i) { font-size: 12px; margin-left: 5px; margin-right: 5px; line-height: 22px; } } </style>Copy the code

Bread crumbs

</ShopBreadItem> </ShopBreadItem to="/category/1005000"> </ShopBreadItem> </ShopBread>Copy the code

Conclusion:

  1. Encapsulates two components shop-bread and shop-bread-item
  2. Use the default slot
  3. Using scoped and :deep selectors

Our breadcrumb component is much improved after this optimization, but there are still some minor issues that we will cover in the next article, the Manual Encapsulation breadcrumb Component Advanced section