Vue 底部按钮组件

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…）