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" @...
·
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>
更多推荐
已为社区贡献11条内容
所有评论(0)