vue tab组件,vue tabbar

　　封装组件是为了重用，改成白话就是不想再做同样的事情。看动漫省下来的时间不香吗？下面这篇文章主要介绍了vue封装TabBar组件的完整步骤，有需要的朋友可以参考一下。

目录

　　实施思路：

　　第一步：打包TabBar和TabBarItem的组件第二步：向TabBarItem发送活动图片第三步：TabBarItem和routing的组合效果第四步：使用字体图标实现TabBarItem的颜色控制。概述了字体图标的介绍。

实现思路：

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

　　这样做可以发现，页面的基本布局已经实现，但是item的主动点击状态还没有实现。

步骤二：给TabBarItem传入active图片

　　为了防止替换内容直接完全替换槽位，使槽位上定义的样式也受到替换的影响，最好在槽位外定义一个div包。

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

步骤四：TabBarItem的颜色控制

　　基本上，但是当在路线中发现重复的点击路径时，将会报告错误。

　　报错原因：

　　因为vue-router 3.0版本的回调格式改为promise，如果没有抓到错误，控制台上会出现这种错误警告。

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

　　NPM I vue-路由器@3.0 -S

　　解决方案2:

　　重写路由器原型链上的push和replace方法，这样就不必在每次调用方法时都添加catch。

　　在main.js中编写以下内容：

　　从“vue路由器”导入路由器

　　const original push=router . prototype . push

　　Router.prototype.push=函数push(location，onResolve，onReject) {

　　if (onResolve onReject)返回originalPush.call(this，location，onResolve，onReject)

　　返回originalPush.call(this，location)。catch(错误=错误)

　　}

　　如果推送被修改但没有生效，那么可以尝试replace方法，例如：

　　const original place=router . prototype . replace；

　　Router.prototype.replace=函数replace(location) {

　　返回original place . call(this，location)。catch(err=err)；

　　};

用字体图标实现

引入字体图标

运用

总结

　　这就是这篇关于vue打包的TabBar组件的文章。有关vue打包的TabBar组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。