& # 65279;这是vue.js系列文章第二遍,第一篇讲述的是如何搭建vue.js的开发环境,计划按进度做成一款完整的应用,当然前提是时间允许的话。本文用到了手写笔语法,至于为什么使用手写笔而不去用sass,主要是因为手写笔来自于node . js社区。总之笔是一款高效的CSS预处理器,具体使用不在本文讨论范围。好了,废话不说了,下面讲述怎么封装tababr的切换。
底部选项卡进行页面切换,会用到vue里面的路由,也就是vue-router
我们在安装vue-cli时选中默认安装vue-router即可。
安装完毕后,打开我的项目,我们需要在路由器目录的index.vue中配置路由信息,具体配置信息如下
从上面图片,我们可以看的到,我们一共配置了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移动端选项卡组件的封装实践实例