vue 面包屑導航組件封裝
面包屑導航可以將瀏覽過的頁面記錄下來,方便很快速的跳轉(zhuǎn)回某一個頁面,本文介紹了幾種自己封裝面包屑組件的方式。
一、為什么需要面包屑?
當網(wǎng)頁進行了多次跳轉(zhuǎn)后,用戶可能早就已經(jīng)暈頭轉(zhuǎn)向了。作為程序猿的我們可能通過地址欄參數(shù)還可以分清楚當前處于哪一個位置,終歸網(wǎng)頁是要展示給用戶。用戶來使用的話,沒有面包屑導航的話,可能就對網(wǎng)頁產(chǎn)生了抵觸心理,使用面包屑導航將每次跳轉(zhuǎn)的頁面記錄下來,可以很好解決這一問題。
二、初級封裝
1. 實現(xiàn)思路
- 準備頁面結(jié)構(gòu)和樣式,需要用到字體圖標 在
public
目錄下的index.html
中引入cdn的字體圖標資源
<link rel="stylesheet" rel="external nofollow" >
- 將需要外部傳入的值定義為自定義屬性
- 將外部寫在標簽內(nèi)部的內(nèi)容放置在默認插槽中
2. 代碼演示
在src/components
目錄下新建bread-crumbs.vue
文件,公用的組件放在這個目錄下統(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
文件,將封裝好的全局組件進行注冊
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' // 導入并注冊 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. 不足
只能滿足基本需求,超過二級導航后就無法使用。
三、進階封裝
1. 實現(xiàn)思路
- 參考
elementUI
面包屑組件代碼
<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>
- 將每一個導航封裝為一個組件
2. 代碼演示
在上一步封裝的基礎(chǔ)上繼續(xù)改進代碼
代碼如下(示例): 在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
中代碼,將導航的每一項放置在默認插槽中
<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. 使用
使用的時候,有多少個二級導航就使用幾個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. 不足
在最后一個導航后面會有多余的一個>
指示標識
四、高階封裝
1. 思路
終極版,使用render函數(shù)自己進行拼接創(chuàng)建。 createElement render
render選項與h函數(shù)
指定組件顯示的內(nèi)容:
new Vue({選項})
- el 選項,通過一個選擇器找到容器,容器內(nèi)容就是組件內(nèi)容
- template 選項,
<div>組件內(nèi)容</div>
作為組件內(nèi)容 - render選項,它是一個函數(shù),函數(shù)回默認傳人createElement的函數(shù)(h),這個函數(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 標簽去除,單文件組件 // 2. 返回值就是組件內(nèi)容 // 3. vue2.0 的h函數(shù)傳參進來的,vue3.0 的h函數(shù)導入進來 // 4. h 第一個參數(shù) 標簽名字 第二個參數(shù) 標簽屬性對象 第三個參數(shù) 子節(jié)點 // 需求 // 1. 創(chuàng)建bread-crumbs父容器 // 2. 獲取默認插槽內(nèi)容 // 3. 去除bread-crumbs-item組件的i標簽,因該由render函數(shù)來組織 // 4. 遍歷插槽中的item,得到一個動態(tài)創(chuàng)建的節(jié)點,最后一個item不加i標簽 // 5. 把動態(tài)創(chuàng)建的節(jié)點渲染再bread-crumbs標簽中 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. 使用
這個方式封裝后,讓全局組件的復用性更強了,強烈推薦使用
<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>
可以看到這樣封裝后,咱們自己封裝的面包屑導航已經(jīng)支持多級導航了。而且最后一個導航后面的>
指示標識也沒有了。
到此這篇關(guān)于vue 面包屑導航組件封裝的文章就介紹到這了,更多相關(guān)vue 面包屑導航內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定方式
這篇文章主要介紹了vue單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07Vue.js結(jié)合SortableJS實現(xiàn)樹形數(shù)據(jù)拖拽
本文主要介紹了Vue.js結(jié)合SortableJS實現(xiàn)樹形數(shù)據(jù)拖拽,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-05-05