vue 底部導航組件

不喜歡羅裏吧嗦，拿過去直接能用：

<template>
    <div class="footer">
		<div v-for='(item,index) of items' :class='[item.cls,{on:index === idx}]' @click="$router.push(item.push)" :key='index'>
			<img class="img" :src="index===idx?item.iconSelect:item.icon">
			<p :class="['colorChange',{on:index===idx}]" >{{item.name}}</p>
		</div>
 
	</div>
</template>
<script>
export default{
		props:['idx'],
		data(){
			return {
				items:[
				{
					cls:"myCourse",
					push:"/myCourse",
					icon:'stiao-26.png',
					iconSelect:'stiao-23.png'
        },
        {
					cls:"myCourse",
					push:"/",
					icon:'stiao-25.png',
					iconSelect:'stiao-22.png'
				},
				{
					cla:"mine",
					push:"/myCenter",
					icon:'stiao-24.png',
					iconSelect:'stiao-21.png'
				}]
			}
		}
	} 

</script>
<style lang="scss" scope>
.footer{
	font-size: .24rem ;
  color:red;
  position: fixed;
  bottom: 0;
  width: 100%;
  height:1rem ;
  display: flex;
  border-top: 1px #f2f2f2 solid;
  }
	div{
		flex: 1;
	}
	div img{
		width: 1.08rem;
    margin: 0 auto;
    height: .80rem;
    flex: 1;
    margin-top: .1rem;
	}
</style>

組件寫好後，直接引入

 <public-footer :idx="1"></public-footer>

囉嗦一句，idx是用來判斷到了哪個頁面的參數