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