vue封裝TabBar組件的完整步驟記錄
更新時間：2021年10月30日 16:16:35 作者：cdgogo
組件封裝是為了復(fù)用,換成大白話就是,同樣的事情我不想做第二遍,節(jié)省出來的時間用來看動漫不香嗎,下面這篇文章主要給大家介紹了關(guān)于vue封裝TabBar組件的完整步驟,需要的朋友可以參考下
實(shí)現(xiàn)思路：
步驟一：TabBar和TabBarItem的組件封裝
做到這，可以發(fā)現(xiàn)頁面的基本布局已經(jīng)實(shí)現(xiàn)了，但是item的點(diǎn)擊活躍狀態(tài)還沒實(shí)現(xiàn)
步驟二：給TabBarItem傳入active圖片
為了防止替換的內(nèi)容直接整個替換掉插槽，從而插槽上定義的樣式等也被替換影響，最好在插槽外定義一個div包裹
步驟三：TabBarItem和路由的結(jié)合效果
步驟四：TabBarItem的顏色控制
基本完成，但是發(fā)現(xiàn)路由中點(diǎn)擊路徑重復(fù)會報錯
報錯原因：
是因?yàn)?vue-router ≥3.0 的版本回調(diào)格式改為promise，若沒有捕獲到錯誤，控制臺會出現(xiàn)此類報錯警告。
解決方法1：vue-router降級到3.0的版本
npm i vue-router@3.0 -S
解決方法二：
對Router原型鏈上的push、replace方法進(jìn)行重寫，這樣就不用每次調(diào)用方法都要加上catch。
在main.js里面寫入下面內(nèi)容：
import Router from 'vue-router'
const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
return originalPush.call(this, location).catch(err => err)
}
如果修改了push還是沒有生效，那么可以嘗試replace方法，例如：
const originalReplace = Router.prototype.replace;
Router.prototype.replace = function replace(location) {
return originalReplace.call(this, location).catch(err => err);
};
用字體圖標(biāo)實(shí)現(xiàn)
引入字體圖標(biāo)
運(yùn)用
總結(jié)
到此這篇關(guān)于vue封裝TabBar組件的文章就介紹到這了,更多相關(guān)vue封裝TabBar組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中使用$http.post請求傳參的錯誤及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了element ui table 增加篩選的方法示例，詳細(xì)的介紹了如何添加規(guī)則內(nèi)容，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
vue跳轉(zhuǎn)頁面的幾種常用方法實(shí)例總結(jié)
Vue是一種流行的JavaScript框架,用于構(gòu)建用戶界面,在Vue中,頁面跳轉(zhuǎn)通常使用路由(Router)來實(shí)現(xiàn),除此之外還有很多方法,這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)頁面的幾種常用方法,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了Vue按鈕級權(quán)限方案，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
第三方庫xlsx提供了強(qiáng)大的功能來處理Excel文件,它可以簡化導(dǎo)出Excel文件這個過程,本文將為大家詳細(xì)介紹一下它的具體使用,需要的小伙伴可以了解下2025-01-01
詳解vue-meta如何讓你更優(yōu)雅的管理頭部標(biāo)簽
這篇文章主要介紹了詳解vue-meta如何讓你更優(yōu)雅的管理頭部標(biāo)簽，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
詳解本地Vue項(xiàng)目請求本地Node.js服務(wù)器的配置方法
本文只針對自己需要本地模擬接口于是搭建一個本地node服務(wù)器供自己測試使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
這篇文章主要介紹了Vue框架里使用Swiper的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
利用Vue+intro.js實(shí)現(xiàn)頁面新手引導(dǎo)流程功能
在同學(xué)們使用某些網(wǎng)站的新版本頁面的時候,經(jīng)常會出現(xiàn)一個類似于新手引導(dǎo)一樣的效果,來幫助同學(xué)們更好的熟悉新版本頁面的功能和使用,這篇文章主要給大家介紹了關(guān)于如何利用Vue+intro.js實(shí)現(xiàn)頁面新手引導(dǎo)流程功能的相關(guān)資料,需要的朋友可以參考下2023-11-11
Vue3中的ref和reactive響應(yīng)式原理解析
這篇文章主要介紹了Vue3中的ref和reactive響應(yīng)式,本節(jié)主要介紹了響應(yīng)式變量和對象，以及變量和對象在響應(yīng)式和非響應(yīng)式之間的轉(zhuǎn)換，需要的朋友可以參考下2022-08-08