< 返回技术文档列表

vue如何封装TabBar组件

发布时间:2021-11-07 00:58:43⊙投诉举报

这篇文章主要为大家展示了“vue如何封装TabBar组件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue如何封装TabBar组件”这篇文章吧。

    实现思路:

    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组件”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注血鸟云行业资讯频道!


    /template/Home/Zkeys/PC/Static