& # 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=暗厍北?
首页
& lt;/m-tabbar-item>
& lt; m-tabbar-item id=拔恢谩?isRouter=癷sPosition”比;
职位
& lt;/m-tabbar-item>
& lt; m-tabbar-item id=跋ⅰ?isRouter=癷sMessage”比;
消息
& lt;/m-tabbar-item>
& lt; m-tabbar-item id=拔摇?isRouter=癷sMe”比;
我
& 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>
