vue面包屑組件的封裝方法

更新時間：2021年09月18日 11:59:13 作者：愛美食的程序員

這篇文章主要為大家詳細介紹了vue面包屑組件的封裝方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

vue中自己封裝面包屑組件，供大家參考，具體內(nèi)容如下

要實現(xiàn)效果

前言

很多電商類產(chǎn)品都需要實現(xiàn)面包屑導航，用來優(yōu)化用戶體驗

一、初級面包屑封裝組件

1.封裝基礎(chǔ)結(jié)構(gòu)組件 Bread.vue

<template>
  <div class='xtx-bread'>
    <div class="xtx-bread-item">
      <RouterLink to="/">首頁</RouterLink>
    </div>
    <i class="iconfont icon-angle-right"></i>
    <div class="xtx-bread-item">
      <RouterLink to="/category/10000">二級級導航</RouterLink>
    </div>
    <i class="iconfont icon-angle-right"></i>
    <div class="xtx-bread-item">
      <span>三級導航</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.定義 props 暴露 parentPath parentName 屬性，默認插槽，動態(tài)渲染組件

<div class='xtx-bread'>
     <div class="xtx-bread-item">
       <RouterLink to="/">首頁</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>
//用props接收數(shù)據(jù)
props: {
    parentName: {
      type: String,
      default: ''
    },
    parentPath: {
      type: String,
      default: ''
    }
  }

3.注冊組件，使用驗證效果

import Bread from './Bread'
export default {
  install (app) {
    // Vue2中，參數(shù)是Vue構(gòu)造函數(shù)
    // Vue3中，參數(shù)是根組件的實例對象

    // 配置一個全局組件
    app.component(Bread.name, Bread)
  }
}

4.使用組件

<Bread parentPath="/category/1005000" parentName="服飾">飛織系列</Bread>
<Bread parentName="服飾">飛織系列</Bread>  //parentPath去掉后不能實現(xiàn)跳轉(zhuǎn)

二、高級封裝無限極導航

參考element-ui的面包屑組件：

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/" rel="external nofollow" >活動管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>活動列表</el-breadcrumb-item>
  <el-breadcrumb-item>活動詳情</el-breadcrumb-item>
</el-breadcrumb>

1.封裝基礎(chǔ)結(jié)構(gòu)組件 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] //to的值即可以是字符串，也可以是對象
    }
  }
}
</script>
//使用時
<bread-item to="/xxx/id"></bread-item>
<bread-item :to='{path:"/xxx/id"}'></bread-item>

2.封裝 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.注冊

import BreadItem  from './BreadItem'
import Bread  from './Bread'
export default {
  install (app) {
    // Vue2中，參數(shù)是Vue構(gòu)造函數(shù)
    // Vue3中，參數(shù)是根組件的實例對象

    // 配置一個全局組件
    app.component(Bread.name,Bread)
    app.component(BreadItem.name, BreadItem)
  }
}

4.使用

// 面包屑
<Bread>
    <BreadItem to="/">首頁</XtxBreadItem>
    <BreadItem to="/category/1005000">服飾</XtxBreadItem>
    <BreadItem >飛織系列</XtxBreadItem>
</XtxBread>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: