vue移动端头部组件

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

 

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

 

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

 

• « 上一篇：shell 脚本遍历指定文件夹下的所有文件
• » 下一篇：vue el-input 禁止输入特殊字符 只可输入数字 正则验证