vue.js移动端选项卡组件的封装实践实例

  

& # 65279;这是vue.js系列文章第二遍,第一篇讲述的是如何搭建vue.js的开发环境,计划按进度做成一款完整的应用,当然前提是时间允许的话。本文用到了手写笔语法,至于为什么使用手写笔而不去用sass,主要是因为手写笔来自于node . js社区。总之笔是一款高效的CSS预处理器,具体使用不在本文讨论范围。好了,废话不说了,下面讲述怎么封装tababr的切换。

  

底部选项卡进行页面切换,会用到vue里面的路由,也就是vue-router
  

  

我们在安装vue-cli时选中默认安装vue-router即可。
  

  

安装完毕后,打开我的项目,我们需要在路由器目录的index.vue中配置路由信息,具体配置信息如下

  

 vue.js移动端选项卡组件的封装实践实例

  

从上面图片,我们可以看的到,我们一共配置了4子页面,其中重定向为配置默认组件的路由。
  

  

路由配置完成后,我们需要封装选项卡组件了
  

  

因为选项卡组件属于基础组件,所以我们新建了文件夹选项卡,然后在标签文件夹下面新建了tabbar组件和tababritem组件。我们先说tababritem组件的封装

  

<强> tabbaritem封装

  

我们知道tababritem有一张正常显示图片,选中后的图片,和图片下的文字,其中属性id用来记录当前tabbaritem的组件名,属性isRouter用来记录当前选中是否是这个tababritem。

        & lt; template>   & lt;一个类=癿-tabbar-item”: class="{“活跃”:isActive} " @click=癵oToRouter”比;   & lt; div类=" m-tabbar-item-icon " v-show=? isActive”祝辞& lt;槽name=" icon-normal祝辞& lt;/slot> & lt;/div>   & lt; div类=癿-tabbar-item-icon v-show”=癷sActive”祝辞& lt;槽name=" icon-active祝辞& lt;/slot> & lt;/div>   & lt; div类=" m-tabbar-item-text "祝辞& lt; slot> & lt;/slot> & lt;/div>   & lt;/a>   & lt;/template>      & lt;脚本类型=拔谋?ecmascript-6”比;      出口默认{   道具:{   id: {   类型:字符串   },   isRouter: {   类型:布尔,   默认值:假   }   },   计算:{   isActive () {   返回this.isRouter   }   },   方法:{   goToRouter () {   美元的父母。发出(tabbarActionEvent, this.id)美元//判断是否为路由跳转   美元。router.push (this.id)   }   }   }   & lt;/script>      & lt;风格范围lang="笔" rel=把奖?笔”在      .m-tabbar-item   flex: 1   text-align:中心   .m-tabbar-item-icon   padding-top: 5 px   padding-bottom 1 px   img   24像素宽度:   24 px高度:   .m-tabbar-item-text   字体大小:8像素   颜色:# 949494   ,.is-active   .m-tabbar-item-text   颜色:# fa3e25      & lt;/style>   之前      

接下来,我们要封装tababr, tabbar里面需要包含tabbaritem,主要设置了下tabbar的样式,具体代码如下
  

  

<强> tabbar的封装
  

        & lt; template>   & lt; div类=癿-tabbar”比;   & lt; slot> & lt;/slot>   & lt;/div>   & lt;/template>      & lt;脚本类型=拔谋?ecmascript-6”比;   出口默认{}   & lt;/script>      & lt;风格范围lang="笔" rel=把奖?笔”在      .m-tabbar   显示:flex   flex-direction:行   位置:固定   底部:0   左:0   右:0   宽度:100%   隐藏溢出:   高度:50 px   背景:# fff   border-top: 1 px固体# e4e4e4      & lt;/style>   之前      

最后在我们的app.vue里面引用tabbar组件,监听子类tabbaritem的点击方法,来控制当前哪个项目的选中颜色文字的改变

  

<强> app.vue代码

        & lt; template>   & lt; div id=坝τ谩北?   & lt; router-view> & lt;/router-view>   & lt; m-tabbar @tabbarActionEvent=癱hangeSelectedValue”比;   & lt; m-tabbar-item id=凹摇?isRouter=暗厍北?   ![](./资产/tabbar-home-normal@2x.png)   ![](./资产/tabbar-home-selected@2x.png)   首页   & lt;/m-tabbar-item>   & lt; m-tabbar-item id=拔恢谩?isRouter=癷sPosition”比;   ![](./资产/tabbar-position-normal@2x.png)   ![](./资产/tabbar-position-selected@2x.png)   职位   & lt;/m-tabbar-item>   & lt; m-tabbar-item id=跋ⅰ?isRouter=癷sMessage”比;   ![](./资产/tabbar-message-normal@2x.png)   ![](./资产/tabbar-message-selected@2x.png)   消息   & lt;/m-tabbar-item>   & lt; m-tabbar-item id=拔摇?isRouter=癷sMe”比;   ![](./资产/tabbar-me-normal@2x.png)   ![](./资产/tabbar-me-selected@2x.png)   我   & lt;/m-tabbar-item>   & lt;/m-tabbar>   & lt;/div>   & lt;/template>      & lt; script>   从“共同/标签/进口mTabbar tab.vue”   从“共同/标签/进口mTabbarItem tabbar-item”      出口默认{   名称:“应用程序”,   组件:{   mTabbar,   mTabbarItem   },   数据(){   返回{   地区:没错,   isPosition:假的,   isMessage:假的,   isMe:假   }   },   方法:{   changeSelectedValue:函数(elValue) {   如果(elValue=https://www.yisu.com/zixun/=='家'){   这一点。地区=true   其他}{   这一点。地区=false   }   如果(elValue=https://www.yisu.com/zixun/==拔恢谩?{   这一点。isPosition=true   其他}{   这一点。isPosition=false   }   如果(elValue=https://www.yisu.com/zixun/==跋ⅰ?{   这一点。isMessage=true   其他}{   这一点。isMessage=false   }   如果(elValue=https://www.yisu.com/zixun/=='我'){   这一点。isMe=true   其他}{   这一点。isMe=false   }   }   }   }   & lt;/script>      

vue.js移动端选项卡组件的封装实践实例