Vue 底部导航组件化
tab.vue
<template>
<div id='tab'>
<ul>
// 页面切换
<router-link tag="li" v-for="item in itemList" :to="item.msg" activeClass="mylink">
//上面的图标
<span :class="item.className"></span>
//下面的文字
<span>{{item.name}}</span>
</router-link>
</ul>
</div>
</template>
<script>
export default {
name: 'tab',
props: {itemList: Array}
}
</script>
<style scoped>
ul {
display: flex;
align-items: center;
justify-content: space-around;
position: fixed;
bottom: 0;
height: 70px;
width: 100%;
background-color: #fffffb;
margin: 0;
padding: 0;
}
/*被点击的样式*/
.mylink {
color: #faa755;
}
ul li{
display: flex;
flex:1;
flex-direction: column;
align-items: center;
}
</style>
App.vue使用组件
<template>
<div id="app">
<router-view></router-view>
<tab :itemList="itemList">
</tab>
</div>
</template>
<script>
import tab from './components/tab.vue'
export default {
data(){
return{
itemList:[{//包括路由地址,名字,以及图标样式
msg:'/movie',
name:'电影',
className:'iconfont icon-dianying',
},
{
msg:'/cinema',
name:'影院',
className:'iconfont icon-yingyuan',
},
{
msg:'/msg',
name:'资讯',
className:'iconfont icon-zixun',
},
{
msg:'/mine',
name:'我的',
className:'iconfont icon-wode_huaban1',
}]
}
},
components: {
'tab': tab
}
}
</script>
使用
1传参;希望使用者提供一个底部导航的信息,绑定给itemList,信息包括className(iconfont)图标样式,name按钮名称以及路由地址msg(我忘了改用path…)