I. Preface:

Here’s the code for the bread crumbs on the Elemental-Plus website. I’m curious. I want a cute bread crumb too.

Two, the bread crumbs of the preparatory work

1. Start by creating new breadcrumb folders and files

Src/components/index.js register global components

// Method 1 batch register as global
// export default {// Export by default
// install (app) {
// // 1. In-depth search for each item
// const requireComponet = require.context('./', true, /\.vue$/)
// // 2. Loop through each item of the deep search
// requireComponet.keys().forEach(item => {
// // 3. Obtain an array object
// const moduleObj = requireComponet(item).default
// console.log(moduleObj, '00')
// // 4. Register components repeatedly
// app.component(moduleObj.name, moduleObj)
/ /})
/ /}
// }

// Method 2 is registered globally as a plug-in
import LwxBread from './Bread'
import LwxBreadItem from './Bread/BreadItem.vue'
export default {
  install (app) {
    app.component(LwxBread.name, LwxBread)
    app.component(LwxBreadItem.name, LwxBreadItem)
  }
}

Copy the code

3. Import main.js and use itCreateApp (App). The use ()

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// Import global component functions registered in bulk or as plug-ins
import componentPlugins from '@/components'

createApp(App).use(componentPlugins).use(store).use(router).mount('#app')
Copy the code

Three, the detailed code of bread crumbs

1, the SRC/components/Bread/index. The vue Bread crumbs

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

<script>
import { provide } from 'vue'
export default {
  name: 'LwxBread'.// 1. Receive the separator separator passed by the parent
  props: {
    separator: {
      type: String.// If the parent does not pass separator, use the default value
      default: '/'
    }
  },
  setup (props) {
    // 2. Supply the received delimiter to LwxBreadItem
    provide('separator', props.separator)
  }
}
</script>
<style scoped lang="less">
.lwx-bread {
  display: flex;
  padding: 25px 10px;
  /deep/ &-item {
    a {
      color: # 666;
      transition: all 0.4 s;
      text-decoration: none;
      &:hover {
        color: #27BA9B; }}}i {
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px; }}</style>
Copy the code

2, the SRC/components/Bread/BreadItem vue crumbs subset

<template>
    <div  class="lwx-bread-item">
        <! -- if there is no to, give a placeholder: click not to jump -->
        <template v-if=! "" to">
            <slot></slot>
        </template>
        <! Router router router router router router router router router router
        <template v-else>
            <router-link :to="to"> <slot></slot> </router-link>
        </template>
        <! Use separator: If separator is not passed and does not have a default value, create your own -->
         <i v-if="separator">{{ separator }}</i>
         <i v-else>&gt;</i>
    </div>
</template>

<script>
import { inject } from 'vue'
export default {
  name: 'LwxBreadItem'.props: {
  // When receiving to from the parent component, we accept whatever type the parent component sends
    to: {
      type: String
    }
  },
  setup () {
    // 3. Receive the separator from LwxBread
    const separator = inject('separator')
    return { separator }
  }
}
</script>
<style lang="less" scoped>
.lwx-bread-item {
     color: #ccc;
  i {
    margin: 0 6px;
    font-size: 10px; } // Last oneiHidden &:nth-last-of-type(1) {
    i {
      display: none; }}}</style>
Copy the code

3. App.vue uses breadcrumbs globally

<template>
  <div>
    <! Separator passes to child component LwxBread -->
     <LwxBread separator="> >">
       <LwxBreadItem to="'/'">Home page</LwxBreadItem>
       <LwxBreadItem >Electronic products,</LwxBreadItem>
       <LwxBreadItem >Mobile phone</LwxBreadItem>
       <LwxBreadItem >Huawei plus</LwxBreadItem>
     </LwxBread>
  </div>
</template>
Copy the code