drawing-back/src/components/navBar/index.vue
2024-06-19 11:43:45 +08:00

58 lines
1.4 KiB
Vue

<template>
<view class="container">
<!-- 建议放在外层 -->
<uv-sticky>
<uv-navbar fixed @leftClick="backhandle" safeAreaInsetTop>
<template v-slot:left>
<view class="uv-nav-slot">
<uv-icon name="arrow-left" size="19" v-if="isShowLeft"></uv-icon>
</view>
</template>
<template v-slot:right>
<slot name="right"></slot>
</template>
<template v-slot:center>
<slot name="center">
<span style="font-size: 34rpx; font-weight: bold"
>退画接收确认</span
>
</slot>
</template>
</uv-navbar>
</uv-sticky>
</view>
</template>
<script setup lang="ts">
import { computed } from "vue";
const isShowLeft = computed(() => {
const pages = getCurrentPages();
return pages.length === 1 ? false : true;
});
const backhandle = (): void => {
// console.log(pages);
const pages = getCurrentPages();
if (pages.length === 1) return;
uni.navigateBack();
};
</script>
<style lang="scss" scoped>
@mixin flex($direction: row) {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: $direction;
}
.uv-nav-slot {
@include flex;
align-items: center;
justify-content: space-between;
border-width: 0.5px;
border-radius: 100px;
border-color: #dadbde;
padding: 3px 7px;
opacity: 0.8;
}
</style>