6 changed files with 9309 additions and 26780 deletions
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -1,23 +1,11 @@ |
|||||
<template> |
<template> |
||||
<div ref="domRef"></div> |
|
||||
|
<div> |
||||
|
<img :src="qrcode" alt="QR Code" :style="`width: ${size}px;height: ${size}px`" /> |
||||
|
</div> |
||||
</template> |
</template> |
||||
<script setup> |
<script setup> |
||||
import QRCode from 'qrcodejs2' |
|
||||
import { ref, watch } from 'vue' |
|
||||
const domRef = ref(null) |
|
||||
|
import { useQRCode } from '@vueuse/integrations/useQRCode' |
||||
const props = defineProps({ size: Number, text: String }) |
const props = defineProps({ size: Number, text: String }) |
||||
watch(domRef, nxt => { |
|
||||
if (nxt) { |
|
||||
nxt.innerHTML = '' |
|
||||
const { size, text } = props |
|
||||
new QRCode(nxt, { |
|
||||
width: size, |
|
||||
height: size, |
|
||||
text, |
|
||||
colorDark: '#000', |
|
||||
colorLight: '#fff' |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
|
const qrcode = useQRCode(props.text, { errorCorrectionLevel: 'L', margin: 0 }) |
||||
</script> |
</script> |
||||
<style lang="scss" scoped></style> |
<style lang="scss" scoped></style> |
||||
|
|||||
File diff suppressed because it is too large
Loading…
Reference in new issue