0
点赞
收藏
分享

微信扫一扫

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

组件封装是为了复用,换成大白话就是,同样的事情我不想做第二遍,节省出来的时间用来看动漫不香吗,下面这篇文章主要给大家介绍了关于vue封装TabBar组件的完整步骤,需要的朋友可以参考下


目录
  • ​​实现思路:​​
  • ​​步骤一:TabBar和TabBarItem的组件封装​​
  • ​​步骤二:给TabBarItem传入active图片​​
  • ​​步骤三:TabBarItem和路由的结合效果​​
  • ​​步骤四:TabBarItem的颜色控制​​
  • ​​用字体图标实现​​
  • ​​引入字体图标​​
  • ​​运用​​
  • ​​总结​​


实现思路:

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


步骤一:TabBar和TabBarItem的组件封装

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

vue封装TabBar组件的完整步骤记录_插槽_03

vue封装TabBar组件的完整步骤记录_字体图标_04

vue封装TabBar组件的完整步骤记录_字体图标_05

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


步骤二:给TabBarItem传入active图片

vue封装TabBar组件的完整步骤记录_字体图标_06

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

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

vue封装TabBar组件的完整步骤记录_插槽_08


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

vue封装TabBar组件的完整步骤记录_字体图标_09

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

vue封装TabBar组件的完整步骤记录_字体图标_11


步骤四:TabBarItem的颜色控制

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

vue封装TabBar组件的完整步骤记录_字体图标_13

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

vue封装TabBar组件的完整步骤记录_字体图标_14

报错原因:

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

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

1

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组件的完整步骤记录_字体图标_15


运用

vue封装TabBar组件的完整步骤记录_插槽_16

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


总结

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

您可能感兴趣的文章:

举报

相关推荐

0 条评论