vue封裝TabBar組件的完整步驟記錄
實現(xiàn)思路:
步驟一:TabBar和TabBarItem的組件封裝
做到這,可以發(fā)現(xiàn)頁面的基本布局已經(jīng)實現(xiàn)了,但是item的點擊活躍狀態(tài)還沒實現(xiàn)
步驟二:給TabBarItem傳入active圖片
為了防止替換的內(nèi)容直接整個替換掉插槽,從而插槽上定義的樣式等也被替換影響,最好在插槽外定義一個div包裹
步驟三:TabBarItem和路由的結(jié)合效果
步驟四:TabBarItem的顏色控制
基本完成,但是發(fā)現(xiàn)路由中點擊路徑重復(fù)會報錯
報錯原因:
是因為 vue-router ≥3.0 的版本回調(diào)格式改為promise,若沒有捕獲到錯誤,控制臺會出現(xiàn)此類報錯警告。
解決方法1:vue-router降級到3.0的版本
npm i vue-router@3.0 -S
解決方法二:
對Router原型鏈上的push、replace方法進行重寫,這樣就不用每次調(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)實現(xiàn)
引入字體圖標(biāo)
運用
總結(jié)
到此這篇關(guān)于vue封裝TabBar組件的文章就介紹到這了,更多相關(guān)vue封裝TabBar組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vuejs第十一篇組件之slot內(nèi)容分發(fā)實例詳解
這篇文章主要介紹了Vuejs第十一篇之slot內(nèi)容分發(fā)組件詳解的相關(guān)資料2016-09-09moment轉(zhuǎn)化時間戳出現(xiàn)Invalid Date的問題及解決
這篇文章主要介紹了moment轉(zhuǎn)化時間戳出現(xiàn)Invalid Date的問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05Vue.js遞歸組件實現(xiàn)組織架構(gòu)樹和選人功能案例分析
這篇文章主要介紹了Vue.js遞歸組件實現(xiàn)組織架構(gòu)樹和選人功能,本文通過案例代碼講解的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07vue-router4動態(tài)路由刷新404/白屏的解決
本文主要介紹了vue-router4動態(tài)路由刷新404/白屏的解決,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04vue.js動態(tài)修改background-image問題
這篇文章主要介紹了vue.js動態(tài)修改background-image問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08vue的axios請求改變content-type為form-data問題
這篇文章主要介紹了vue的axios請求改變content-type為form-data問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09