欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue封装TabBar组件的完整步骤记录

程序员文章站 2022-03-21 14:32:42
目录实现思路:步骤一:tabbar和tabbaritem的组件封装步骤二:给tabbaritem传入active图片步骤三:tabbaritem和路由的结合效果步骤四:tabbaritem的颜色控制用...

实现思路:

vue封装TabBar组件的完整步骤记录

步骤一:tabbar和tabbaritem的组件封装

vue封装TabBar组件的完整步骤记录

vue封装TabBar组件的完整步骤记录

vue封装TabBar组件的完整步骤记录

vue封装TabBar组件的完整步骤记录

做到这,可以发现页面的基本布局已经实现了,但是item的点击活跃状态还没实现

步骤二:给tabbaritem传入active图片

vue封装TabBar组件的完整步骤记录

vue封装TabBar组件的完整步骤记录

为了防止替换的内容直接整个替换掉插槽,从而插槽上定义的样式等也被替换影响,最好在插槽外定义一个div包裹

vue封装TabBar组件的完整步骤记录

步骤三:tabbaritem和路由的结合效果

vue封装TabBar组件的完整步骤记录

vue封装TabBar组件的完整步骤记录

vue封装TabBar组件的完整步骤记录

步骤四:tabbaritem的颜色控制

vue封装TabBar组件的完整步骤记录

vue封装TabBar组件的完整步骤记录

基本完成,但是发现路由中点击路径重复会报错

vue封装TabBar组件的完整步骤记录

报错原因:

是因为 vue-router ≥3.0 的版本回调格式改为promise,若没有捕获到错误,控制台会出现此类报错警告。

解决方法1:vue-router降级到3.0的版本

npm i vue-router@3.0 -s 

解决方法二:

对router原型链上的push、replace方法进行重写,这样就不用每次调用方法都要加上catch。

在main.js里面写入下面内容:

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);
};

用字体图标实现

引入字体图标

vue封装TabBar组件的完整步骤记录

运用

vue封装TabBar组件的完整步骤记录

vue封装TabBar组件的完整步骤记录

总结

到此这篇关于vue封装tabbar组件的文章就介绍到这了,更多相关vue封装tabbar组件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!