vue-cli底部固定tabbar

版权声明：本文为pureszgd原创文章，未经允许不得转载, 要转载请评论留言! https://blog.csdn.net/pureszgd/article/details/85008508

• Tabbar.vue

<template>
	<div class="tabberWarp" >
		<div class="warp">
			<Item :class="selected == item.page ? 'selected': 'normal'" :txt='item.txt' :page='item.page' @change='getVal' v-for='item in tabbarDes' :key='item.page'>
			</Item>
		</div>
	</div>
</template>

<script>
	import Item from '@/components/Item.vue'
	export default{
		components:{
			Item
		},
		data:function(){
			return{
				selected:'monitor',
				tabbarDes:[
					{
						txt:'tab1',
						page:'page1'
						
					},				
					{
						txt:'tab2', 
						page:'page2'
					}
				]
			}
		},
		methods:{
			getVal(res) {
				this.selected = res;
			}
		} 
	}
</script>
   
<style type="text/css">
	.warp{
		border-top: 1px solid #eee;
		display: flex;
	}
	.tabberWarp{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff; 
	}
	.selected {
		color: #272d2f;
	}
	.normal {
		color: gray;
	}
</style>

• Item.vue

<template>
	<div class="itemWarp" @click='changePage' v-text="txt"></div>
</template>

<script>
	export default{
		props:{
			txt: String,
			page: String
		},
		methods: {
			changePage() {
				this.$router.push('/' + this.page);
				this.$emit('change', this.page);
			}
		}
	}
</script>

<style>
	.itemWarp {
		text-align: center;
		font-size: 14px;
		line-height: 44px;
		width: 100%;
	}
</style>

• App.vue

<template>
  <div id="app">
    <router-view></router-view>
    <Tabbar></Tabbar>
  </div>
</template>
 
<script>
import Tabbar from'@/components/Tabbar.vue'
export default {
  name: 'app',
  created:function(){
    this.$router.push('/page1')
  },
  components:{
    Tabbar
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #272d2f;
}
body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}
</style>