您好,登錄后才能下訂單哦!
vue3自己封裝面包屑功能組件的方式有哪些,很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
面包屑導(dǎo)航可以將瀏覽過的頁面記錄下來,方便很快速的跳轉(zhuǎn)回某一個頁面,本文介紹了幾種自己封裝面包屑組件的方式,我們一起來看看如何實現(xiàn)的吧~
面包屑導(dǎo)航(BreadcrumbNavigation)這個概念來自童話故事“漢賽爾和格萊特”,當(dāng)漢賽爾和格萊特穿過森林時,不小心迷路了,但是他們發(fā)現(xiàn)在沿途走過的地方都撒下了面包屑,讓這些面包屑來幫助他們找到回家的路。
看完上面的介紹,相信各位已經(jīng)理解了面包屑組件的使用場景了。對的,沒錯,是用來記錄我們點擊了哪些頁面,方便我們再返回之前某一個頁面。
當(dāng)網(wǎng)頁進(jìn)行了多次跳轉(zhuǎn)后,用戶可能早就已經(jīng)暈頭轉(zhuǎn)向了。作為程序猿的我們可能通過地址欄參數(shù)還可以分清楚當(dāng)前處于哪一個位置,終歸網(wǎng)頁是要展示給用戶。用戶來使用的話,沒有面包屑導(dǎo)航的話,可能就對網(wǎng)頁產(chǎn)生了抵觸心理,使用面包屑導(dǎo)航將每次跳轉(zhuǎn)的頁面記錄下來,可以很好解決這一問題。
準(zhǔn)備頁面結(jié)構(gòu)和樣式,需要用到字體圖標(biāo)
在public目錄下的index.html中引入cdn的字體圖標(biāo)資源
<link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css" rel="external nofollow" >
將需要外部傳入的值定義為自定義屬性
將外部寫在標(biāo)簽內(nèi)部的內(nèi)容放置在默認(rèn)插槽中
在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文件,將封裝好的全局組件進(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')
傳入公共組件需要的值
代碼如下(示例):
<template> <div class="home-banner"> <bread-crumbs parentPath="/xxx" parentName="電器">空調(diào)</bread-crumbs> </div> </template> <script> export default { name: 'App', setup() { } } </script>
只能滿足基本需求,超過二級導(dǎo)航后就無法使用。
參考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>
將每一個導(dǎo)航封裝為一個組件
在上一步封裝的基礎(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)航的每一項放置在默認(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>
使用的時候,有多少個二級導(dǎo)航就使用幾個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>
在最后一個導(dǎo)航后面會有多余的一個>指示標(biāo)識
終極版,使用render函數(shù)自己進(jìn)行拼接創(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ù)回默認(rèn)傳人createElement的函數(shù)(h),這個函數(shù)用來創(chuàng)建結(jié)構(gòu),再render函數(shù)返回渲染為組件內(nèi)容。它的優(yōu)先級更高。
修改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 第一個參數(shù) 標(biāo)簽名字 第二個參數(shù) 標(biāo)簽屬性對象 第三個參數(shù) 子節(jié)點 // 需求 // 1. 創(chuàng)建bread-crumbs父容器 // 2. 獲取默認(rèn)插槽內(nèi)容 // 3. 去除bread-crumbs-item組件的i標(biāo)簽,因該由render函數(shù)來組織 // 4. 遍歷插槽中的item,得到一個動態(tài)創(chuàng)建的節(jié)點,最后一個item不加i標(biāo)簽 // 5. 把動態(tài)創(chuàng)建的節(jié)點渲染再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>
這個方式封裝后,讓全局組件的復(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)航了。而且最后一個導(dǎo)航后面的>指示標(biāo)識也沒有了。
可以將高階寫法中的功能代碼使用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組件的所有的插槽里面填充組件實例 const items = this.$slots.default() const results = [] items.forEach((item, index) => { results.push(item) // 手動生成一個i圖標(biāo),添加到面包屑項目的后面 if (index < items.length - 1) { results.push(<i className='iconfont icon-angle-right'></i>) } }) return <div className='bread-crumbs'>{results}</div> } }
功能雖然很小,但是涵蓋的知識點很多,以上代碼均已在本地測試
看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章,請關(guān)注億速云行業(yè)資訊頻道,感謝您對億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。