THJ_Mobile/src/packages/mobile/components/base/qrcode/index.vue

<template>
    <van-dialog class="app-qrcode" v-model:show="showDialog" confirm-button-text="取消">
        <div class="app-qrcode__container" ref="qrcodeRef">
            <img src="@mobile/assets/logo.png" />
        </div>
    </van-dialog>
</template>

<script lang="ts" setup>
import { shallowRef, computed, watch, nextTick } from 'vue'
import { Dialog } from 'vant'
import QRCode from 'qrcodejs2'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    content: String
})

const VanDialog = Dialog.Component
const emit = defineEmits(['update:show'])
const qrcodeRef = shallowRef<HTMLDivElement>()

const showDialog = computed({
    get: () => props.show,
    set: (val) => emit('update:show', val)
})

watch(showDialog, (status) => {
    if (status) {
        nextTick(() => {
            const el = qrcodeRef.value
            if (el) {
                el.innerHTML = ''
                new QRCode(el, {
                    width: 180,
                    height: 180,
                    text: props.content
                })
            }
        })
    }
})
</script>

<style lang="less">
@import './index.less';
</style>