dz-app/components/mx-nav-bar/mx-nav-bar.vue

<template>
    <uv-navbar v-bind="bindings">
        <!--  slot 穿透  -->
        <template v-for="name in Object.keys($slots)" #[name]>
            <slot :name="name"/>
        </template>
        <template v-if="!$slots.center&&subTitle" #center>
            <view class="max-w-[400rpx] text-center" :style="bindings.titleStyle">
                <view class="truncate">{{ bindings.title }}</view>
                <view class="text-3xs font-normal truncate">{{ subTitle }}</view>
            </view>
        </template>
    </uv-navbar>
</template>

<script>
import {computed} from 'vue';
import {empty} from "@/uni_modules/uv-ui-tools/libs/function/test";
import {navbarProps} from "@/uni_modules/uv-navbar/components/uv-navbar/uv-navbar.vue";
import {useH5BackHome} from "@/components/mx-nav-bar/useH5BackHome";
import {useTransfer} from "@/hooks/useTransfer";
import {blockRunner, createPropDefine} from "@/utils";
import {fnPlaceholder} from "@/utils/uni-helper";

export default {
    name: 'mx-nav-bar',
    props: {
        ...navbarProps,
        mode: createPropDefine('light'),
        subTitle: createPropDefine(''),
        opacity: createPropDefine(1, Number),
        // 用于支持左图标点击的AOP方法，支持返回boolean或者promise
        leftClickBlock: createPropDefine(null, Function),
        // leftClick&leftIcon被mx-nav-bar自行控制了，如果要隐藏left，设置leftDisabled=true
        leftDisabled: createPropDefine(false, Boolean)
    },
    setup(props, {attrs}) {
        const {hasPreviousPage, shouldShowHome} = useH5BackHome()
        const {relaunch, transferBack} = useTransfer()

        const darkMode = computed(() => props.mode == 'dark')
        const lightMode = computed(() => props.mode == 'light')
        const bindings = computed(() => {
            const override = {...props, ...attrs}
            // 主题色适配
            if (darkMode.value) {
                override.bgColor = 'var(--primary-color)'
                override.titleStyle = {color: 'white', fontSize: '16px', fontWeight: 700}
                override.leftIconColor = 'white'
            } else {
                override.bgColor = '#ffffff'
                override.titleStyle = {color: 'var(--main-color)', fontSize: '16px', fontWeight: 700}
                override.leftIconColor = 'var(--content-color)'
            }
            if (props.opacity == 0) {
                override.bgColor = 'transparent'
            } else if (props.opacity < 1) {
                override.bgColor = uni.$uv.colorToRgba(override.bgColor, props.opacity)
            }

            if (!props.leftDisabled) {
                // 自行控制后退逻辑
                override.autoBack = false
                override.leftIconSize = 20
                if (hasPreviousPage.value) {
                    override.leftIcon = 'arrow-left'
                    if (empty(attrs.onLeftClick)) override.onLeftClick = handleNavBack
                } else if (shouldShowHome.value) {
                    override.leftIcon = 'home'
                    override.leftIconSize = 22
                    if (empty(attrs.onLeftClick)) override.onLeftClick = handleHomeClick
                }
            } else {
                override.autoBack = false
                override.leftIcon = ''
                override.onLeftClick = fnPlaceholder
            }

            return override
        })

        async function handleNavBack() {
            await blockRunner(props.leftClickBlock)
            transferBack()
        }

        async function handleHomeClick() {
            await blockRunner(props.leftClickBlock)
            relaunch()
        }

        return {
            darkMode,
            lightMode,
            bindings
        }
    }
}

</script>
<style scoped>
</style>