vue 顶部公共组件封装

<template>
<div class="top-header">
<div
class="top-nav flex flex--justify-content--space-between flex--align-items--center"
:class="{'bg-white': !isTransparent}" >
<!-- 左 -->
<div class="left-img flex flex--justify-content--start">
<div v-if="showBack" @click="back">
<img v-if="!isTransparent" :src="blackImg" alt />
<img v-else :src="whiteImg" alt />
</div>
</div>

<!-- 中 -->
<div class="top-center">
<h2
v-if="title"
class="ellipsis-1"
:class="{'black': !isTransparent, 'white': isTransparent}"
>{{title}}</h2>
</div>

<!-- 右 -->
<div class="right-opart flex flex--justify-content--end">
<slot name="right"></slot>
</div>
</div>
<div v-if="!isTransparent" class="clear-position"></div>
</div>
</template>
<script>
import whiteImg from "../../../static/img/common/white-left.png";//白色返回图标
import blackImg from "../../../static/img/common/black-left.png";//黑色返回图标
export default {
props: [
"isTransparent", // 导航组件是否透明
"title", // 导航的标题，不传不显示
"showBack" // 是否显示返回按钮
],
data() {
return {
whiteImg,
blackImg
};
},
methods: {
/**
* 返回
*/
back() {
this.$router.go(-1);
}
}
};
</script>
<style scoped>
.top-header {

}
.right-opart,
.left-img {
25%;
}
.top-center {
font-weight: 500;
font-family: PingFangSC;
}

.clear-position,
.top-nav {
/* height: 0.8rem; */
padding: 0 0.3rem;
box-sizing: border-box;
height: 1.12rem;
/* background-color: #FFFFFF; */
/* border-bottom: 1px solid #f2f4f7; */
}
.top-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
/* padding-top: 0.32rem; */
}
.left-img img {
0.24rem;
height: 0.44rem;
}
.top-center h2 {
font-size: 0.34rem;
}
.top-center h2.black {
color: #333;
}
.top-center h2.white {
color: #fff;
}
</style>