一、依赖参考
pnpm i vue-qr
二、组件封装
<template>
<VueQr class="qrcode" :text :size :margin :logoSrc="icon" :colorDark="color" :backgroundColor="bgColor" />
</template>
<script setup lang="ts">
defineOptions({ name: 'QRCode' })
import VueQr from 'vue-qr/src/packages/vue-qr.vue'
defineProps({
/** 二维码内容 必需 */
text: { type: String, required: true },
/** 嵌入至二维码中心的 LOGO 地址 */
icon: { type: String, default: '' },
/** 二维码图像的外边距, 默认 0px */
margin: { type: Number, default: 0 },
/** 尺寸, 长宽一致, 包含外边距 */
size: { type: Number, default: 150 },
/** 二维码颜色 */
color: { type: String, default: '#000' },
/** 二维码背景颜色 */
bgColor: { type: String, default: 'transparent' },
})
</script>
<style lang="scss" scoped>
.qrcode:hover {
cursor: pointer;
}
</style>
三、使用案例
<template>
<button @click="donwloadQrCode">下载</button>
<QrCode text="安能摧眉折腰事权贵，使我不得开心颜？" ref="qrcodeRef" />
</template>
<script setup lang="ts">
// import QrCode from '@/components/QrCode/index.vue'
import { type GlobalComponents } from 'vue'
/** 二维码组件实例 */
// const qrcodeRef = ref<InstanceType<typeof QrCode>>()
const qrcodeRef = ref<InstanceType<GlobalComponents['QRCode']>>()
function donwloadQrCode() {
// 获取二维码图片的 base64 链接
console.log(qrcodeRef.value?.$el.src)
}
</script>
四、参考文献
