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

<template>
    <Dialog class="app-qrcode" v-model:show="showDialog" :show-confirm-button="showConfirmButton"
        confirm-button-text="保存" show-cancel-button @confirm="onConfirm">
        <vue-qr ref="qrRef" :size="400" :logoSrc="require('@mobile/assets/logo.svg')" :text="content" />
    </Dialog>
</template>

<script lang="ts" setup>
import { computed, shallowRef } from 'vue'
import { Dialog } from 'vant'
import plus from '@/utils/h5plus'
import VueQr from 'vue-qr/src/packages/vue-qr.vue'

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

const emit = defineEmits(['update:show'])
const showConfirmButton = shallowRef(false)
const qrRef = shallowRef()

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

// 保存二维码
const onConfirm = () => {
    plus.saveImage(qrRef.value.imgUrl, 'thj_' + (props.fileName ?? new Date().getTime()))
}

plus.onPlusReady(() => {
    showConfirmButton.value = true
})
</script>

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