Encapsulation method of Vue breadcrumbs component

Vue encapsulates the breadcrumb component for your reference. The specific contents are as follows

To achieve the effect

Preface

Many e-commerce products need to implement breadcrumb navigation to optimize user experience

1. Primary breadcrumb package components

1. Encapsulate the infrastructure component Bread.vue

<template>
  <div class='xtx-bread'>
    <div class="xtx-bread-item">
      <RouterLink to="/">Home</RouterLink>
    </div>
    <i class="iconfont icon-angle-right"></i>
    <div class="xtx-bread-item">
      <RouterLink to="/category/10000">Secondary navigation</RouterLink>
    </div>
    <i class="iconfont icon-angle-right"></i>
    <div class="xtx-bread-item">
      <span>Third level navigation</span>
    </div>
  </div>
</template>

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

2. Define props to expose parentPath parentName properties, default slots, and dynamically render components

<div class='xtx-bread'>
     <div class="xtx-bread-item">
       <RouterLink to="/">Home</RouterLink>
     </div>
     <i class="iconfont icon-angle-right"></i>
    <template v-if="parentName">
     <div class="xtx-bread-item" v-if="parentName">
       <RouterLink v-if="parentPath" to="/category/10000">{{parentName}}</RouterLink>
       <span v-else>{{parentName}}</span>
     </div>
    </template>
    <i v-if="parentName" class="iconfont icon-angle-right"></i>
    <div class="xtx-bread-item">
      <span> <slot/> </span>
    </div>
  </div>
// Use props to receive data props: {
    parentName: {
      type: String,
      default: ''
    },
    parentPath: {
      type: String,
      default: ''
    }
  }

3. Register components and use verification effects

import Bread from './Bread'
export default {
  install (app) {
    // In Vue2, the parameter is the Vue constructor // In Vue3, the parameter is the instance object of the root component // Configure a global component app.component(Bread.name, Bread)
  }
}

4. Use components

<Bread parentPath="/category/1005000" parentName="Apparel">Flying Knit Series</Bread>
<Bread parentName="Apparel">Flying Weave Series</Bread> //Cannot jump after removing parentPath

2. Advanced packaging Infinitus navigation

Refer to the breadcrumb component of element-ui:

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/" rel="external nofollow" >Activity Management</a></el-breadcrumb-item>
  <el-breadcrumb-item>Activity List</el-breadcrumb-item>
  <el-breadcrumb-item>Event details</el-breadcrumb-item>
</el-breadcrumb>

1. Encapsulate the infrastructure component BrendItem.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] //The value of to can be either a string or an object}
  }
}
</script>
//When using <bread-item to="/xxx/id"></bread-item>
<bread-item :to='{path:"/xxx/id"}'></bread-item>

2. Encapsulate Brend.vue

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

<script>
export default {
  name: 'XtxBread'
}
</script>

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

3. Registration

import BreadItem from './BreadItem'
import Bread from './Bread'
export default {
  install (app) {
    // In Vue2, the parameter is the Vue constructor // In Vue3, the parameter is the instance object of the root component // Configure a global component app.component(Bread.name, Bread)
    app.component(BreadItem.name, BreadItem)
  }
}

4. Use

// Breadcrumbs
    <BreadItem to="/">Home</XtxBreadItem>
    <BreadItem to="/category/1005000">Clothing</XtxBreadItem>
    <BreadItem >Flying Weave Series</XtxBreadItem>
</XtxBread>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: