122 lines
2.4 KiB
Vue
122 lines
2.4 KiB
Vue
<template>
|
|
<uv-navbar
|
|
:fixed="fixed"
|
|
:bgColor="bgColor"
|
|
:leftIcon="leftIcon"
|
|
:title="title"
|
|
:titleStyle="{...titleStyle}"
|
|
:placeholder="placeholder"
|
|
@leftClick="onLeftClick"
|
|
z-index="1000"
|
|
>
|
|
<template #left>
|
|
<slot name="left">
|
|
<!-- <image
|
|
v-if="isBack && !leftIcon"
|
|
class="w-54rpx h-54rpx"
|
|
src="/static/images/icon_back_def.svg"
|
|
></image> -->
|
|
<uv-icon size="36rpx" color="white" v-if="isBack && !leftIcon" name="arrow-left"></uv-icon>
|
|
</slot>
|
|
</template>
|
|
<template #center>
|
|
<slot name="center"></slot>
|
|
</template>
|
|
|
|
<template #right>
|
|
<view :style="[{ paddingRight: addUnit(paddingRight) }]">
|
|
<slot name="right"></slot>
|
|
</view>
|
|
</template>
|
|
</uv-navbar>
|
|
</template>
|
|
|
|
<script setup>
|
|
let menuButtonInfo = {}
|
|
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
|
|
menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
// #endif
|
|
|
|
import { computed } from 'vue'
|
|
import { addUnit, sys } from '@climblee/uv-ui/libs/function/index.js'
|
|
|
|
const props = defineProps({
|
|
fixed: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
isBack: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
autoBack: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
placeholder: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
bgColor: {
|
|
type: String,
|
|
default: '#ee2c37',
|
|
},
|
|
imgMode: {
|
|
type: String,
|
|
default: 'aspectFill',
|
|
},
|
|
safeAreaInsetTop: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
height: {
|
|
type: [String, Number],
|
|
default: '44px',
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
leftIcon: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
titleStyle: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
color: '#fff',
|
|
}
|
|
},
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['leftClick'])
|
|
|
|
const paddingRight = computed(() => {
|
|
let rightButtonWidth = 0
|
|
rightButtonWidth =
|
|
sys().windowWidth - (menuButtonInfo?.left ?? sys().windowWidth)
|
|
return `${rightButtonWidth}px`
|
|
})
|
|
const onLeftClick = () => {
|
|
if (!props.isBack) return
|
|
emit('leftClick')
|
|
if (props.autoBack) {
|
|
// #ifdef H5
|
|
let canNavBack = getCurrentPages()
|
|
if (canNavBack && canNavBack.length > 1) {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
})
|
|
} else {
|
|
history.back()
|
|
}
|
|
// #endif
|
|
// #ifndef H5
|
|
uni.navigateBack()
|
|
// #endif
|
|
}
|
|
}
|
|
</script>
|