vue-cli-tabbar封装学习
slot实现tabbar封装
创建tabbar组件(TabBar.vue)
- 创建tab-bar块,并放入
slot
插槽,slot
可以在在调用此组件时插入其他组件<template>
<div id="tab-bar">
<slot></slot>
</div>
</template>
- 导出组件
<script>
export default {
name: "TabBar"
}
</script>
- 渲染css
<style scoped>
#tab-bar{
display: flex;
background-color: burlywood;
position: fixed;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0px -3px 1px rgba(100,100,100,.08);
}
</style>
创建tabbarItem组件(TabBarItem.vue)
- 创建tab-bar-item块,并放入
slot
插槽 @click="itemClick"
绑定itemClick
点击事件:style="activeStyle"
绑定activeStyle
样式来渲染<template>
<div class="tab-bar-item" @click="itemClick">
<div v-if="isActive">
<slot name="item-icon"></slot>
</div>
<div v-else>
<slot name="item-icon-active"></slot>
</div>
<div :style="activeStyle">
<slot name="item-text"></slot>
</div>
</div>
</template>
- 导出组件并定义js操作
props
接收tabbar传来的属性- 使用
computed
计算属性来判定操作
this.$route.path.indexOf(this.path) !== -1
判定当前路径是否是活跃路径return this.isActive ? {color: this.activeColor} : {}
根据isActive
值来返回样式
itemClick
事件触发来跳转界面<script>
export default {
name: "TarBarItem",
props: {
path: String,
activeColor:{
type: String,
default: 'red'
}
},
computed: {
isActive(){
return this.$route.path.indexOf(this.path) !== -1
},
activeStyle(){
return this.isActive ? {color: this.activeColor} : {}
}
},
methods: {
itemClick(){
this.$router.replace(this.path)
}
}
}
</script>
- 渲染css
<style scoped>
.tab-bar-item{
flex: 1;
text-align: center;
height: 49px;
}
.tab-bar-item img {
height: 25px;
}
</style>
创建路由(同时创建4个相应界面-此步骤省略
)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/home1'
},
{
path: '/home1',
component: () => import('../views/pages/Home')
},
{
path: '/home2',
component: () => import('../views/pages/Home2')
},
{
path: '/home3',
component: () => import('../views/pages/Home3')
},
{
path: '/home4',
component: () => import('../views/pages/Home4')
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
App.vue实现tabbar
- 使用组件,标签使用组件名,组件名以驼峰命名法,例:
组件名-TabBar,标签名可用-<tabBar>/<tab-bar>
- 插槽可根据之前定义的slot-name来绑定,例:
<slot name='a'></slot>--对应--<div slot='a'></div>
<tab-bar-item path="/home1" active-color="blue">
传递path
、activeColor
属性到tabBarItem
组件<template>
<div id="app">
<router-view/>
<tabBar>
<tab-bar-item path="/home1" active-color="blue">
<img slot="item-icon" src="./assets/img/1.svg" alt="1">
<img slot="item-icon-active" src="./assets/img/3.svg" alt="1">
<div slot="item-text">首页</div>
</tab-bar-item>
<tab-bar-item path="/home2">
<img slot="item-icon" src="./assets/img/1.svg" alt="1">
<img slot="item-icon-active" src="./assets/img/3.svg" alt="1">
<div slot="item-text">首页2</div>
</tab-bar-item>
<tab-bar-item path="/home3">
<img slot="item-icon" src="./assets/img/1.svg" alt="1">
<img slot="item-icon-active" src="./assets/img/3.svg" alt="1">
<div slot="item-text">首页3</div>
</tab-bar-item>
<tab-bar-item path="/home4">
<img slot="item-icon" src="./assets/img/1.svg" alt="1">
<img slot="item-icon-active" src="./assets/img/3.svg" alt="1">
<div slot="item-text">首页4</div>
</tab-bar-item>
</tabBar>
</div>
</template>
效果图