目錄

• 實現思路：
• 步驟一：TabBar和TabBarItem的元件封裝
• 步驟二：給TabBarItem傳入active圖片
• 步驟三：TabBarItem和路由的結合效果
• 步驟四：TabBarItem的顏色控制
• 用字型圖示實現
• 引入字型圖示
• 運用
• 總結

實現思路：

步驟一：TabBar和TabBarItem的元件封裝

做到這，可以發現頁面的基本佈局已經實現了，但是item的點選活躍狀態還沒實現

步驟二：給TabBarItem傳入active圖片

為了防止替換的內容直接整個替換掉插槽，從而插槽上定義的樣式等也被替換影響，最好在插槽外定義一個div包裹

步驟三：TabBarItem和路由的結合效果

步驟四：TabBarItem的顏色控制

基本完成，但是發現路由中點選路徑重複會報錯

報錯原因：

是因為 -router ≥3.0 的版本回調格式改為promise，若沒有捕獲到錯誤，控制檯會出現此類報錯警告。

解決方法1：vue-router降級到3.0的版本

npm i [email protected] -S 

解決方法二：

對Router原型鏈上的push、replace方法進行重寫，這樣就不用每次呼叫方法都要加上catch。

在main.裡面寫入下面內容：

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,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(thihttp://www.cppcns.coms,location).catch(err => err);
};

用字型圖示實現

引入字型圖示

運用

總結

到此這篇關於vue封裝TabBar元件的文章就介紹到這了客棧,更多相關vue封裝TabBar元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！