vue项目移动端用vant实现的头部组件

html部分

<template>
	<div style="height:50px;">
		<van-nav-bar :title="title" left-text="" left-arrow :z-index="999" @click-left="onBack"	>
			<van-icon name="user-o" slot="right" @click="userInfo"/>
		</van-nav-bar>
	</div>
</template>

js部分

<script>
	import { NavBar } from 'vant';
	export default {
		name:'headerNav',
		components:{
			[NavBar.name]: NavBar,
		},
		props:{
			title:String,
		},
		methods: {
			onBack() {
				history.back();
			},
			userInfo(){
				this.$router.push({ path: '/user' });
			}	
		}	
	}
</script>

css部分

<style>

.van-nav-bar{
	background: url(../../assets/images/user-title.png) no-repeat;
	background-size: 100% 100%;
	width:100%;
	position: fixed;
	z-index: 999;
	top:0
}
.van-nav-bar__title{
	color:#fff;
}
.van-icon-arrow-left:before {
	content: "\F008";
	color:#fff;
}
.van-icon-user-o:before {
	content: "\F0CC";
	color:#fff;
	font-size: 0.6rem;
}
</style>