腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

vue封裝TabBar組件的完整步驟記錄

更新時(shí)間：2021年10月30日 16:16:35 作者：cdgogo

組件封裝是為了復(fù)用,換成大白話就是,同樣的事情我不想做第二遍,節(jié)省出來(lái)的時(shí)間用來(lái)看動(dòng)漫不香嗎,下面這篇文章主要給大家介紹了關(guān)于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);
};