vue3自己封裝面包屑功能組件的幾種方式
更新時(shí)間：2021年09月18日 11:38:58 作者：leo
網(wǎng)站中我們經(jīng)常看到有個(gè)導(dǎo)航路徑,可以直觀地顯示當(dāng)前頁面的路徑,并快速返回之前的任意頁面,這是一個(gè)非常實(shí)用的功能,也是在Web前端必備的導(dǎo)航UI之一,這篇文章主要給大家介紹了關(guān)于vue3自己封裝面包屑功能組件的幾種方式,需要的朋友可以參考下
前言
面包屑導(dǎo)航可以將瀏覽過的頁面記錄下來，方便很快速的跳轉(zhuǎn)回某一個(gè)頁面，本文介紹了幾種自己封裝面包屑組件的方式，我們一起來看看如何實(shí)現(xiàn)的吧~
一、為什么需要面包屑？
面包屑導(dǎo)航(BreadcrumbNavigation)這個(gè)概念來自童話故事“漢賽爾和格萊特”，當(dāng)漢賽爾和格萊特穿過森林時(shí)，不小心迷路了，但是他們發(fā)現(xiàn)在沿途走過的地方都撒下了面包屑，讓這些面包屑來幫助他們找到回家的路。
看完上面的介紹，相信各位已經(jīng)理解了面包屑組件的使用場景了。對的，沒錯(cuò)，是用來記錄我們點(diǎn)擊了哪些頁面，方便我們再返回之前某一個(gè)頁面。
當(dāng)網(wǎng)頁進(jìn)行了多次跳轉(zhuǎn)后，用戶可能早就已經(jīng)暈頭轉(zhuǎn)向了。作為程序猿的我們可能通過地址欄參數(shù)還可以分清楚當(dāng)前處于哪一個(gè)位置，終歸網(wǎng)頁是要展示給用戶。用戶來使用的話，沒有面包屑導(dǎo)航的話，可能就對網(wǎng)頁產(chǎn)生了抵觸心理，使用面包屑導(dǎo)航將每次跳轉(zhuǎn)的頁面記錄下來，可以很好解決這一問題。
二、初級封裝
1. 實(shí)現(xiàn)思路
準(zhǔn)備頁面結(jié)構(gòu)和樣式,需要用到字體圖標(biāo)
在public目錄下的index.html中引入cdn的字體圖標(biāo)資源
<link rel="stylesheet" rel="external nofollow" >
將需要外部傳入的值定義為自定義屬性
將外部寫在標(biāo)簽內(nèi)部的內(nèi)容放置在默認(rèn)插槽中
2. 代碼演示
在src/components目錄下新建bread-crumbs.vue文件，公用的組件放在這個(gè)目錄下統(tǒng)一管理，文件名可自定義。
代碼如下（示例）：
<template>
<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文件，將封裝好的全局組件進(jìn)行注冊
import BreadCrumbs from './bread-crumbs'
export default {
install (app) {
app.component(BreadCrumbs.name, BreadCrumbs)
}
}
在main.js中注冊為插件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 導(dǎo)入并注冊
import myUI from './components'
createApp(App).use(store).use(router).use(myUI).mount('#app')
3. 使用
傳入公共組件需要的值
代碼如下（示例）：
<template>
<div class="home-banner">
<bread-crumbs parentPath="/xxx" parentName="電器">空調(diào)</bread-crumbs>
</div>
</template>
<script>
export default {
name: 'App',
setup() {
}
}
</script>
4. 不足
只能滿足基本需求，超過二級導(dǎo)航后就無法使用。
三、進(jìn)階封裝
1. 實(shí)現(xiàn)思路
參考elementUI面包屑組件代碼
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
<el-breadcrumb-item><a href="/" rel="external nofollow" >活動(dòng)管理</a></el-breadcrumb-item>
<el-breadcrumb-item>活動(dòng)列表</el-breadcrumb-item>
<el-breadcrumb-item>活動(dòng)詳情</el-breadcrumb-item>
</el-breadcrumb>
將每一個(gè)導(dǎo)航封裝為一個(gè)組件
2. 代碼演示
在上一步封裝的基礎(chǔ)上繼續(xù)改進(jìn)代碼
代碼如下（示例）：
在src/component目錄下新建bread-crumbs-item組件，文件名可以自定義。
<template>
<div class="bread-crumbs-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: 'BreadCurmbsItem',
props: {
to: {
type: [String, Object]
}
}
}
</script>
還是在src/components目錄下的index.js中注冊為全局組件
import BreadCrumbs from './bread-crumbs'
import BreadCrumbsItem from './bread-crumbs-item'
export default {
install (app) {
app.component(BreadCrumbs.name, BreadCrumbs)
app.component(BreadCrumbsItem .name, BreadCrumbsItem )
}
}
修改BreadCrumbs.vue中代碼，將導(dǎo)航的每一項(xiàng)放置在默認(rèn)插槽中
<template>
<div class='bread-crumbs'>
<slot />
</div>
</template>
<script>
export default {
name: 'BreadCrumbs'
}
</script>
<style scoped lang='less'>
.bread-crumbs {
display: flex;
padding: 25px 10px;
:deep(&-item) {
a {
text-decoration: none;
color: #666;
transition: all 0.4s;
&:hover {
color: #27ba9b;
}
}
}
:deep(i) {
font-style: normal;
font-size: 12px;
margin-left: 5px;
margin-right: 5px;
line-height: 22px;
}
}
</style>
3. 使用
使用的時(shí)候，有多少個(gè)二級導(dǎo)航就使用幾個(gè)BreadCrumbsItem
代碼如下（示例）：
<template>
<div class="home-banner">
<!-- 面包屑 -->
<BreadCrumbs>
<BreadCrumbsItem to="/">首頁</BreadCrumbsItem>
<BreadCrumbsItem to="/xxx">電器</BreadCrumbsItem>
<BreadCrumbsItem >空調(diào)</BreadCrumbsItem>
</BreadCrumbs>
</div>
</template>
<script>
export default {
name: 'App',
setup() {
}
}
</script>
4. 不足
在最后一個(gè)導(dǎo)航后面會(huì)有多余的一個(gè)>指示標(biāo)識
四、高階封裝
1. 思路
終極版，使用render函數(shù)自己進(jìn)行拼接創(chuàng)建。
render render選項(xiàng)與h函數(shù)
指定組件顯示的內(nèi)容：new Vue({選項(xiàng)})
- el 選項(xiàng)，通過一個(gè)選擇器找到容器，容器內(nèi)容就是組件內(nèi)容
- template 選項(xiàng)，<div>組件內(nèi)容</div> 作為組件內(nèi)容
- render選項(xiàng)，它是一個(gè)函數(shù)，函數(shù)回默認(rèn)傳人createElement的函數(shù)（h），這個(gè)函數(shù)用來創(chuàng)建結(jié)構(gòu)，再render函數(shù)返回渲染為組件內(nèi)容。它的優(yōu)先級更高。
2. 代碼演示
修改BreadCurmbsItem組件內(nèi)的代碼
<template>
<div class="bread-crumbs-item">
<RouterLink v-if="to" :to="to"><slot /></RouterLink>
<span v-else><slot /></span>
</div>
</template>
<script>
export default {
name: 'BreadCurmbsItem',
props: {
to: {
type: [String, Object]
}
}
}
</script>
修改BreadCrumbs.vue中的代碼
代碼示例(如下)：
<script>
import { h } from 'vue'
export default {
name: 'BreadCrumbs',
render () {
// 用法
// 1. template 標(biāo)簽去除，單文件組件
// 2. 返回值就是組件內(nèi)容
// 3. vue2.0 的h函數(shù)傳參進(jìn)來的，vue3.0 的h函數(shù)導(dǎo)入進(jìn)來
// 4. h 第一個(gè)參數(shù) 標(biāo)簽名字 第二個(gè)參數(shù) 標(biāo)簽屬性對象 第三個(gè)參數(shù) 子節(jié)點(diǎn)
// 需求
// 1. 創(chuàng)建bread-crumbs父容器
// 2. 獲取默認(rèn)插槽內(nèi)容
// 3. 去除bread-crumbs-item組件的i標(biāo)簽，因該由render函數(shù)來組織
// 4. 遍歷插槽中的item，得到一個(gè)動(dòng)態(tài)創(chuàng)建的節(jié)點(diǎn)，最后一個(gè)item不加i標(biāo)簽
// 5. 把動(dòng)態(tài)創(chuàng)建的節(jié)點(diǎn)渲染再bread-crumbs標(biāo)簽中
const items = this.$slots.default()
const dymanicItems = []
items.forEach((item, i) => {
dymanicItems.push(item)
if (i < (items.length - 1)) {
dymanicItems.push(h('i', { class: 'iconfont icon-angle-right' }))
}
})
return h('div', { class: 'bread-crumbs' }, dymanicItems)
}
}
</script>
<style lang='less'>
// 將scope屬性去除，目的是為了樣式穿透至item組件中
.bread-crumbs {
display: flex;
padding: 25px 10px;
&-item {
a {
text-decoration: none;
color: #666;
transition: all .4s;
&:hover {
color: #27ba9b;
}
}
}
i {
font-size: 12px;
margin-left: 5px;
margin-right: 5px;
line-height: 22px;
// 樣式的方式，不合理
// &:last-child {
// display: none;
// }
}
}
</style>
3. 使用
這個(gè)方式封裝后，讓全局組件的復(fù)用性更強(qiáng)了，強(qiáng)烈推薦使用
<template>
<div class="home-banner">
<!-- 面包屑 -->
<BreadCrumbs>
<BreadCrumbsItem to="/">首頁</BreadCrumbsItem>
<BreadCrumbsItem to="/xxx">電器</BreadCrumbsItem>
<BreadCrumbsItem to="/xxx/xx">空調(diào)</BreadCrumbsItem>
<BreadCrumbsItem >遙控器</BreadCrumbsItem>
</BreadCrumbs>
</div>
</template>
<script>
export default {
name: 'App',
setup() {
}
}
</script>
可以看到這樣封裝后，咱們自己封裝的面包屑導(dǎo)航已經(jīng)支持多級導(dǎo)航了。而且最后一個(gè)導(dǎo)航后面的>指示標(biāo)識也沒有了。
五、使用jsx優(yōu)化
可以將高階寫法中的功能代碼使用jsx的方式進(jìn)行重寫，jsx寫出來的代碼更加的簡潔明了。
export default {
name: 'BreadCrumbs',
render () {
// vue2的render函數(shù)的形參是 h 函數(shù)
// vue3中h函數(shù)是導(dǎo)入的
// createElement(標(biāo)簽名稱, 標(biāo)簽的屬性, 標(biāo)簽的子元素)
// console.dir(this.$slots.default())
// 獲取XtxBread組件的所有的插槽里面填充組件實(shí)例
const items = this.$slots.default()
const results = []
items.forEach((item, index) => {
results.push(item)
// 手動(dòng)生成一個(gè)i圖標(biāo)，添加到面包屑項(xiàng)目的后面
if (index < items.length - 1) {
results.push(<i className='iconfont icon-angle-right'></i>)
}
})
return <div className='bread-crumbs'>{results}</div>
}
}
總結(jié)
功能雖然很小，但是涵蓋的知識點(diǎn)很多，以上代碼均已在本地測試
到此這篇關(guān)于vue3自己封裝面包屑功能組件的文章就介紹到這了,更多相關(guān)vue3封裝面包屑功能組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了element-ui下拉菜單組件Dropdown,本文詳細(xì)給大家介紹了我遇到的一個(gè)最大的坑，通過結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
這篇文章主要介紹在Vue中是如何封裝axios的相關(guān)資料，axios的封裝主要是幫助我們簡化代碼和利于后期的更新維護(hù)，感興趣的小伙伴可以和小編一起來閱讀下面文章的具體內(nèi)容2021-10-10
這篇文章主要介紹了vue配置代理服務(wù)器proxy 多種方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue關(guān)閉eslint檢查的方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue.js+boostrap項(xiàng)目實(shí)踐(案例詳解)
這篇文章主要介紹了vue.js+boostrap項(xiàng)目實(shí)踐(案例詳解)的相關(guān)資料,本文圖文并茂介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了vue 集成 sweetalert2 提示組件的問題，本文通過項(xiàng)目案例實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-11-11
解決Vue-cli3沒有vue.config.js文件夾及配置vue項(xiàng)目域名的問題
這篇文章主要介紹了解決Vue-cli3沒有vue.config.js文件夾及配置vue項(xiàng)目域名的問題，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12
組件封裝是為了復(fù)用,換成大白話就是,同樣的事情我不想做第二遍,節(jié)省出來的時(shí)間用來看動(dòng)漫不香嗎,下面這篇文章主要給大家介紹了關(guān)于vue封裝TabBar組件的完整步驟,需要的朋友可以參考下2021-10-10
在項(xiàng)目中經(jīng)常會(huì)遇到圖片上傳功能，今天腳本之家小編給大家?guī)砹耸褂肰ue實(shí)現(xiàn)圖片上傳的三種方式，感興趣的朋友一起看看吧2018-07-07
vuex實(shí)現(xiàn)簡易計(jì)數(shù)器
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)一個(gè)簡易計(jì)數(shù)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10