技术要点:
1.是否显示下边框
2.返回按钮支持自定义跳转,默认跳转支持组件外埋点操作
3.支持右标题
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9afc1dd7a6e40989a9b711cc2f99c7c7.png)
代码如下:
HTML代码
<template>
<div
class="header-bar"
:class="{bd_line:showLine}"
@touchstart.prevent
>
<div
class="header-bar_left"
@touchend="goBack"
>
<i />
</div>
<div class="header-bar_title">
{{ title }}
</div>
<div
class="header-bar_right"
@touchend="rightFn"
>
{{ rightTitle }}
</div>
</div>
</template>
JS代码
<script>
export default {
name: 'HeaderBar',
props: {
title: {
type: String,
default: '标题',
},
rightTitle: {
type: String,
default: '',
},
closeWindow: {
type: Boolean,
default: false,
},
showLine: {
type: Boolean,
default: false,
},
isEmit: {
type: Boolean,
default: false,
},
turn: {
type: Boolean,
default: false,
},
},
data() {
return {};
},
methods: {
goBack() {
this.$emit('goToPre');
if (!this.turn) {
this.$router.go(-1);
}
},
rightFn() {
this.$emit('rightFn');
},
},
};
</script>
CSS代码
<style scoped>
.header-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 45px;
background-color: #fff;
z-index: 99;
}
.bd_line {
border-bottom: 1px solid rgba(232, 232, 232, 0.5);
}
.header-bar_left {
height: 45px;
width: 45px;
position: absolute;
top: 0;
left: 0;
}
.header-bar_left i {
display: block;
height: 30px;
width: 30px;
background: url('../../assets/image/fanhui.png') no-repeat center;
background-size: contain;
position: relative;
top: 50%;
left: 10px;
transform: translateY(-50%);
}
.header-bar_title {
height: 45px;
font-size: 18px;
line-height: 45px;
color: #333;
text-align: center;
}
.header-bar_right {
position: absolute;
top: 0;
right: 0;
width: 120px;
height: 45px;
text-align: right;
line-height: 45px;
font-size: 16px;
color: #3386ed;
padding-right: 10px;
}
</style>