<template>
|
<div class="header">
|
<div class="header_x" style="height: 44px;"></div>
|
<div class="header_header" style="height: 44px;">
|
<span><slot name="title"></slot></span>
|
<img @click="previousPage" v-if="isShow && currentPath !== '/logInAgain'" src="@/assets/icon/nav_ic_back@2x.png" alt="">
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { defineProps, watch, ref } from 'vue'
|
import { useRouter, useRoute } from 'vue-router'
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
let currentPath = ref<string>('')
|
|
let isShow = ref<boolean>(false)
|
|
const props = defineProps({
|
pathList: {
|
type: Array,
|
required: false,
|
default: []
|
}
|
})
|
|
// 返回上一页
|
const previousPage = () => {
|
router.go(-1)
|
}
|
|
// 监听路由是否需要显示返回按钮
|
watch(() => route.path, (path, oldPath) => {
|
let res = props.pathList.find(item => {
|
return item === path
|
})
|
currentPath.value = route.path
|
isShow.value = !res;
|
}, { immediate: true })
|
</script>
|
|
<style lang="scss" scoped>
|
.header {
|
.header_x {
|
width: 100%;
|
}
|
.header_header {
|
width: 100%;
|
position: fixed;
|
top: 0;
|
left: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: white;
|
z-index: 9;
|
img {
|
width: 48px;
|
height: 48px;
|
position: absolute;
|
left: 30px;
|
top: 50%;
|
transform: translate(0, -50%);
|
}
|
span {
|
font-size: 32px;
|
font-weight: 500;
|
color: #222222;
|
}
|
}
|
}
|
</style>
|
