面包屑组件的封装

面包屑导航是一种提高用户体验的导航栏 例如:首页>菜单>产品

实现思路:
a/准备页面结构和样式,需要用到字体图标 在public目录下的index.html中引入cdn的字体图标资源也可以使用其他字体图标,
b/将需要外部传入的值定义为自定义属性
c/将外部写在标签内部的内容放置在默认插槽中

demo代码

  <div class='bread-crumbs'>
    <div class="bread-crumbs-item">
      <RouterLink to="/">首页</RouterLink>
    </div>
    <i class="iconfont icon-angle-right"></i>

    <div v-if="parentName" class="bread-crumbs-item">
      <RouterLink v-if="parentPath" :to="parentPath">{{parentName}}</RouterLink>
      <span v-else>{{parentName}}</span>
    </div>

    <i v-if="parentName" class="iconfont icon-angle-right"></i>

    <div class="bread-crumbs-item">
      <span>
          <slot/>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BreadCrumbs',
  props: {
    parentName: {
      type: String,
      default: ''
    },
    parentPath: {
      type: String,
      default: ''
    }
  }
}
</script>

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

在src/components目录下新建index.js文件，将封装好的全局组件进行注册

import BreadCrumbs from './bread-crumbs'

export default {
  install (app) {
    app.component(BreadCrumbs.name, BreadCrumbs)
  }
}

在main.js中注册为插件

import myBread from './components'
createApp(App).use(store).use(router).use(myBread).mount('#app')

由于全局注册了组件,只需要在用到的页面当标签写入并传参即可

<template> 
<div class="home-banner">
<bread-crumbs parentPath="/xxx" parentName="菜单">产品</bread-crumbs> 
</div>
</template>