微信小程序ui模态框覆盖不上二维码

提供一个思路，已经解决！
就是生成二维码后@complete里获取临时文件路径，再将uqrcode 用v-show隐藏，用image显示临时图片

<template>  
    <view :class="classes" :style="[styles]">  
        <!-- #ifdef MP-WEIXIN -->  
        <image v-if="tempFilePath" :src="tempFilePath" :style="[imageStyles]"></image>  
        <!-- #endif -->  
        <uqrcode  
            v-show="!tempFilePath"  
            ref="qrcode"  
            :canvas-id="factCanvasId"  
            :value="value"  
            :size="size"  
            :options="options"  
            :file-type="fileType"  
            :start="start"  
            :auto="auto"  
            :hide="hide"  
            @complete="handleComplete"  
            @click="handleClick"  
        ></uqrcode>  
    </view>  
</template>  

<script>  
    import mixWx from '@/assist/mixins/wx'  
    import {isFunction} from '@/assist/utils/is'  
    import {uniqueID} from '@/assist/utils/assist'  

    export default {  
        name: 'MuQrcode',  
        mixins: [mixWx],  
        data () {  
            return {  
                unid: uniqueID('qrcode'),  
                tempFilePath: '' // 临时文件路径  
            }  
        },  
        props: {  
            // 自定义类名  
            cuClass: {  
                type: [String, null]  
            },  
            // 自定义样式  
            cuStyle: {  
                type: [Object, null]  
            },  
            // canvas组件id, 这边处理不传自动生成, canvasId在微信小程序初始值不能为空，created中赋值也不行，必须给一个值，否则挂载组件后无法绘制  
            canvasId: {  
                type: [String, null]  
            },  
            // 二维码内容  
            value: {  
              type: [String, Number]  
            },  
            // 二维码大小  
            size: {  
              type: [String, Number],  
              default: 150  
            },  
            // 选项  
            options: {  
                type: Object,  
                default: () => ({})  
            },  
            // 导出的文件类型  
            fileType: {  
                type: String,  
                default: 'png'  
            },  
            // 是否初始化组件后就开始生成  
            start: {  
                type: Boolean,  
                default: true  
            },  
            // 是否数据发生改变自动重绘  
            auto: {  
                type: Boolean,  
                default: true  
            },  
            // 隐藏组件  
            hide: {  
                type: Boolean,  
                default: false  
            }  
        },  
        computed: {  
            classes () {  
                let cls = {  
                    'mu-qrcode': true  
                }  
                if (this.cuClass) cls[this.cuClass] = true  
                return Object.keys(cls)  
                // 支付宝，头条小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效  
                // #ifdef MP-ALIPAY || MP-TOUTIAO  
                .join(' ')  
                // #endif  
            },  
            styles () {  
               let ret = {}  
               if (this.cuStyle) ret = Object.assign(ret, this.cuStyle)  
               return ret  
            },  
            imageStyles () {  
                let ret = {}  
                if (this.size) ret.width = ret.height = `${Number(this.size)}px`  
                return ret  
            },  
            factCanvasId () {  
                return this.canvasId || this.unid  
            }  
        },  
        methods: {  
            // 生成二维码  
            make () {  
                if (this.$refs.qrcode) this.$refs.qrcode.make()  
            },  
            // 重新生成二维码  
            remake () {  
                if (this.$refs.qrcode) this.$refs.qrcode.remake()  
            },  
            // 导出临时文件路径。  
            toTempFilePath (callback = {}) {  
                if (!isFunction(callback.success)) {  
                    callback.success = () => {}  
                }  
                if (!isFunction(callback.fail)) {  
                    callback.fail = () => {}  
                }  
                if (!isFunction(callback.complete)) {  
                    callback.complete = () => {}  
                }  

                if (this.$refs.qrcode) {  
                    this.$refs.qrcode.toTempFilePath({  
                        success: res => {  
                            callback.success(res)  
                        },  
                        fail: err => {  
                            callback.fail(err)  
                        },  
                        complete: () => {  
                            callback.complete()  
                        }  
                    })  
                }  
            },  
            // 保存二维码到本地相册  
            save (callback = {}) {  
                if (!isFunction(callback.success)) {  
                    callback.success = () => {}  
                }  
                if (!isFunction(callback.fail)) {  
                    callback.fail = () => {}  
                }  
                if (!isFunction(callback.complete)) {  
                    callback.complete = () => {}  
                }  

                if (this.$refs.qrcode) {  
                    this.$refs.qrcode.save({  
                        success: res => {  
                            callback.success(res)  
                        },  
                        fail: err => {  
                            callback.fail(err)  
                        },  
                        complete: () => {  
                            callback.complete()  
                        }  
                    })  
                }  
            },  
            // 生成完成时触发  
            handleComplete (data) {  
                // 处理微信canvas层级过高, 挡住弹窗问题  
                // #ifdef MP-WEIXIN  
                    this.toTempFilePath({  
                        success: res => {  
                            this.tempFilePath = res.tempFilePath  
                        },  
                        fail: err => {  
                            this.tempFilePath = ''  
                        }  
                    })  
                // #endif  
                this.$emit('complete', data)  
            },  
            // 点击组件  
            handleClick (e) {  
                this.$emit('click', e)  
            }  
        }  
    }  
</script>  
<style lang="scss" scoped>  
    .mu-qrcode {  
        display: inline-flex;  
    }  
</style>