小程序自定义导航栏返回键怎么添加一个返回提示框？点击取消停留在页面

问题遇到的现象和发生背景

自定义了一个导航，想要实现其中一个页面点击返回键出返回提示框

问题相关代码，请勿粘贴截图

 <!-- 导航栏 -->
        <ChildNav  style="width: 100%;">
            <template v-slot:barContent>人像抠图</template>
        </ChildNav>

上面是页面调用自定义导航组件
下面是自定义导航组件代码


<template>
    <view class="navBarBox">


        <!-- 占位 -->
        <view :style="{ height: statusBarHeight + 'px' }"></view>
        <view style="height: 82upx;padding: 3upx 50upx;padding-bottom: 8upx;"></view>

      <!-- 状态栏 -->
              <view class="fixStyle">
                  <view :style="{ height: statusBarHeight + 'px' }"></view>
                  <!-- 真正的导航栏内容 -->
                  <view class="navBar">
                <image @tap="toback" src="../static/icon/back.png" mode="widthFix"></image>
                <slot name="barContent"></slot>
            </view>
        </view>
    </view>
</template>


<script>
    export default {
        data() {
            return {
                // 状态栏高度
                statusBarHeight: 0,
            }
        },
        created() {
            this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
        },
        methods: {
            toback() {
                uni.navigateBack();
            }
        }
    }
</script>

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

toBack(){
wx.showModal({
title: '提示',
content: '确认放弃?',
success (res) {
if (res.confirm) {
wx.navigateBack()
} else {
console.log('用户点击取消')
}
}
})
}

这样的话全部页面都是提示框了，而且照片保存后，还是会有提示框

你这是用uniapp写的呀？报错信息又是啥呢？有没有尝试过换基本库？或者，你可以看看现成的组件，它们是怎么做到自定义导航栏的~ 如：linui、colorui等等

可以在你的自定义导航组件中加入props，然后在父组件中调用的时候传参，在toback方法中判断需不需要弹窗，比如：

export default {
            props: {
                // 检测弹窗
                showDialog: {
                    type: Boolean,
                    default: false,
                }
            }
        }

使用
<ChildNav :showDialog="true"></ChildNav>