You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
1.8 KiB
89 lines
1.8 KiB
<template>
|
|
<div class="header__nav">
|
|
<van-nav-bar
|
|
safe-area-inset-top
|
|
:title="data?.titelTextvalue"
|
|
@click-left="onClickLeft"
|
|
@click-right="onClickRight"
|
|
>
|
|
<template #left>
|
|
<van-icon
|
|
v-if="data?.leftArrowtag"
|
|
class="left_icon"
|
|
name="arrow-left"
|
|
/>
|
|
</template>
|
|
|
|
<template #right>
|
|
<!-- <van-button v-if="data?.leftArrowtag" round block type="info">{{rightText}}</van-button>-->
|
|
</template>
|
|
</van-nav-bar>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="headerNav">
|
|
|
|
const router = useRouter();
|
|
const emit = defineEmits(["goBack"]);
|
|
const props = defineProps({
|
|
leftArrow: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
rightArrow: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
rightText: {
|
|
type: String,
|
|
default: "按钮",
|
|
},
|
|
slefBack: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
titelText: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
});
|
|
const data = reactive({
|
|
leftArrowtag: props?.leftArrow,
|
|
titelTextvalue: props?.titelText,
|
|
});
|
|
|
|
// 左边返回
|
|
const onClickLeft = () => {
|
|
if (props?.leftArrow) {
|
|
if (props?.slefBack) {
|
|
emit("goBack");
|
|
} else {
|
|
router.go(-1);
|
|
}
|
|
}
|
|
};
|
|
|
|
// 右边返回
|
|
const onClickRight = () => {
|
|
emit("rightClick");
|
|
};
|
|
</script>
|
|
<style lang="less" scpoed>
|
|
.header__nav {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
.left_icon {
|
|
color: black !important;
|
|
}
|
|
}
|
|
.van-nav-bar {
|
|
background-color: #ebf3fb;
|
|
}
|
|
.van-nav-bar::after {
|
|
border-bottom-width: 0px !important;
|
|
}
|
|
.van-overlay {
|
|
background-color: rgba(0,0,0,.3) !important;
|
|
}
|
|
</style>
|