mirror of
https://github.com/palxiao/poster-design.git
synced 2025-07-15 16:02:19 +08:00
feat: convert qrcode component to vue3
This commit is contained in:
IchliebedichZhu
parent
36a67967b3
commit
efcdf0d02b
@ -2,108 +2,107 @@
|
|||||||
* @Author: ShawnPhang
|
* @Author: ShawnPhang
|
||||||
* @Date: 2022-03-16 09:15:52
|
* @Date: 2022-03-16 09:15:52
|
||||||
* @Description:
|
* @Description:
|
||||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
* @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
|
||||||
* @LastEditTime: 2024-01-31 15:43:10
|
* @Date: 2024-03-04 09:50:00
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div ref="qrCodeDom" class="qrcode__wrap"></div>
|
<div ref="qrCodeDom" class="qrcode__wrap"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { defineComponent, onMounted, ref, watch, nextTick } from 'vue'
|
import { onMounted, ref, watch, nextTick, defineProps } from 'vue'
|
||||||
import QRCodeStyling, { DrawType, TypeNumber, Mode, ErrorCorrectionLevel, DotType, CornerSquareType, CornerDotType, Extension } from 'qr-code-styling'
|
import QRCodeStyling, { DrawType, TypeNumber, Mode, ErrorCorrectionLevel, DotType, CornerSquareType, CornerDotType, } from 'qr-code-styling'
|
||||||
import { debounce } from 'throttle-debounce'
|
import { debounce } from 'throttle-debounce'
|
||||||
|
|
||||||
export default defineComponent({
|
type TProps = {
|
||||||
props: {
|
width?: number
|
||||||
width: {
|
height?: number
|
||||||
default: 300,
|
image?: string
|
||||||
},
|
value?: string
|
||||||
height: {
|
dotsOptions: {
|
||||||
default: 300,
|
color: string,
|
||||||
},
|
type: DotType,
|
||||||
image: {},
|
}
|
||||||
value: {},
|
}
|
||||||
dotsOptions: {
|
|
||||||
default: () => {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
setup(props) {
|
|
||||||
let options = {}
|
|
||||||
watch(
|
|
||||||
() => [props.width, props.height, props.dotsOptions],
|
|
||||||
() => {
|
|
||||||
render()
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
const render = debounce(300, false, async () => {
|
const props = withDefaults(defineProps<TProps>(), {
|
||||||
options = {
|
width: 300,
|
||||||
width: props.width,
|
height: 300,
|
||||||
height: props.height,
|
dotsOptions: () => ({
|
||||||
type: 'canvas' as DrawType, // canvas svg
|
color: '#41b583',
|
||||||
data: props.value,
|
type: 'rounded',
|
||||||
image: props.image, // /favicon.svg
|
})
|
||||||
margin: 0,
|
|
||||||
qrOptions: {
|
|
||||||
typeNumber: 3 as TypeNumber,
|
|
||||||
mode: 'Byte' as Mode,
|
|
||||||
errorCorrectionLevel: 'M' as ErrorCorrectionLevel,
|
|
||||||
},
|
|
||||||
imageOptions: {
|
|
||||||
hideBackgroundDots: true,
|
|
||||||
imageSize: 0.4,
|
|
||||||
margin: 6,
|
|
||||||
crossOrigin: 'anonymous',
|
|
||||||
},
|
|
||||||
backgroundOptions: {
|
|
||||||
color: '#ffffff',
|
|
||||||
},
|
|
||||||
dotsOptions: {
|
|
||||||
color: '#41b583',
|
|
||||||
type: 'rounded' as DotType,
|
|
||||||
...props.dotsOptions,
|
|
||||||
},
|
|
||||||
cornersSquareOptions: {
|
|
||||||
color: props.dotsOptions.color,
|
|
||||||
type: '',
|
|
||||||
// type: 'extra-rounded' as CornerSquareType,
|
|
||||||
// gradient: {
|
|
||||||
// type: 'linear', // 'radial'
|
|
||||||
// rotation: 180,
|
|
||||||
// colorStops: [{ offset: 0, color: '#25456e' }, { offset: 1, color: '#4267b2' }]
|
|
||||||
// },
|
|
||||||
},
|
|
||||||
cornersDotOptions: {
|
|
||||||
color: props.dotsOptions.color,
|
|
||||||
type: 'square' as CornerDotType,
|
|
||||||
// gradient: {
|
|
||||||
// type: 'linear', // 'radial'
|
|
||||||
// rotation: 180,
|
|
||||||
// colorStops: [{ offset: 0, color: '#00266e' }, { offset: 1, color: '#4060b3' }]
|
|
||||||
// },
|
|
||||||
},
|
|
||||||
}
|
|
||||||
if (props.value) {
|
|
||||||
qrCode.update(options)
|
|
||||||
await nextTick()
|
|
||||||
qrCodeDom.value.firstChild.style = 'width: 100%;' // 强制其适应缩放
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const qrCode = new QRCodeStyling(options)
|
|
||||||
const qrCodeDom = ref<HTMLElement>()
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
render()
|
|
||||||
qrCode.append(qrCodeDom.value)
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
qrCodeDom,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
let options = {}
|
||||||
|
watch(
|
||||||
|
() => [props.width, props.height, props.dotsOptions],
|
||||||
|
() => {
|
||||||
|
render()
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
const render = debounce(300, false, async () => {
|
||||||
|
options = {
|
||||||
|
width: props.width,
|
||||||
|
height: props.height,
|
||||||
|
type: 'canvas' as DrawType, // canvas svg
|
||||||
|
data: props.value,
|
||||||
|
image: props.image, // /favicon.svg
|
||||||
|
margin: 0,
|
||||||
|
qrOptions: {
|
||||||
|
typeNumber: 3 as TypeNumber,
|
||||||
|
mode: 'Byte' as Mode,
|
||||||
|
errorCorrectionLevel: 'M' as ErrorCorrectionLevel,
|
||||||
|
},
|
||||||
|
imageOptions: {
|
||||||
|
hideBackgroundDots: true,
|
||||||
|
imageSize: 0.4,
|
||||||
|
margin: 6,
|
||||||
|
crossOrigin: 'anonymous',
|
||||||
|
},
|
||||||
|
backgroundOptions: {
|
||||||
|
color: '#ffffff',
|
||||||
|
},
|
||||||
|
dotsOptions: {
|
||||||
|
// color: '#41b583',
|
||||||
|
// type: 'rounded' as DotType,
|
||||||
|
...props.dotsOptions,
|
||||||
|
},
|
||||||
|
cornersSquareOptions: {
|
||||||
|
color: props.dotsOptions.color,
|
||||||
|
type: '',
|
||||||
|
// type: 'extra-rounded' as CornerSquareType,
|
||||||
|
// gradient: {
|
||||||
|
// type: 'linear', // 'radial'
|
||||||
|
// rotation: 180,
|
||||||
|
// colorStops: [{ offset: 0, color: '#25456e' }, { offset: 1, color: '#4267b2' }]
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
cornersDotOptions: {
|
||||||
|
color: props.dotsOptions.color,
|
||||||
|
type: 'square' as CornerDotType,
|
||||||
|
// gradient: {
|
||||||
|
// type: 'linear', // 'radial'
|
||||||
|
// rotation: 180,
|
||||||
|
// colorStops: [{ offset: 0, color: '#00266e' }, { offset: 1, color: '#4060b3' }]
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
}
|
||||||
|
if (props.value) {
|
||||||
|
qrCode.update(options)
|
||||||
|
await nextTick()
|
||||||
|
if (!qrCodeDom.value || !qrCodeDom.value.firstChild) return
|
||||||
|
(qrCodeDom.value.firstChild as HTMLElement).setAttribute('style', "width: 100%;") // 强制其适应缩放
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const qrCode = new QRCodeStyling(options)
|
||||||
|
const qrCodeDom = ref<HTMLElement>()
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
render()
|
||||||
|
qrCode.append(qrCodeDom.value)
|
||||||
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
108
src/components/business/qrcode/test
Normal file
108
src/components/business/qrcode/test
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ShawnPhang
|
||||||
|
* @Date: 2022-03-16 09:15:52
|
||||||
|
* @Description:
|
||||||
|
* @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
|
||||||
|
* @Date: 2024-03-04 09:50:00
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div ref="qrCodeDom" class="qrcode__wrap"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, ref, watch, nextTick, defineProps } from 'vue'
|
||||||
|
import QRCodeStyling, { DrawType, TypeNumber, Mode, ErrorCorrectionLevel, DotType, CornerSquareType, CornerDotType, } from 'qr-code-styling'
|
||||||
|
import { debounce } from 'throttle-debounce'
|
||||||
|
|
||||||
|
type TProps = {
|
||||||
|
width?: number
|
||||||
|
height?: number
|
||||||
|
image?: string
|
||||||
|
value?: string
|
||||||
|
dotsOptions: {
|
||||||
|
color: string,
|
||||||
|
type: DotType,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<TProps>(), {
|
||||||
|
width: 300,
|
||||||
|
height: 300,
|
||||||
|
dotsOptions: () => ({
|
||||||
|
color: '#41b583',
|
||||||
|
type: 'rounded',
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
let options = {}
|
||||||
|
watch(
|
||||||
|
() => [props.width, props.height, props.dotsOptions],
|
||||||
|
() => {
|
||||||
|
render()
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
const render = debounce(300, false, async () => {
|
||||||
|
options = {
|
||||||
|
width: props.width,
|
||||||
|
height: props.height,
|
||||||
|
type: 'canvas' as DrawType, // canvas svg
|
||||||
|
data: props.value,
|
||||||
|
image: props.image, // /favicon.svg
|
||||||
|
margin: 0,
|
||||||
|
qrOptions: {
|
||||||
|
typeNumber: 3 as TypeNumber,
|
||||||
|
mode: 'Byte' as Mode,
|
||||||
|
errorCorrectionLevel: 'M' as ErrorCorrectionLevel,
|
||||||
|
},
|
||||||
|
imageOptions: {
|
||||||
|
hideBackgroundDots: true,
|
||||||
|
imageSize: 0.4,
|
||||||
|
margin: 6,
|
||||||
|
crossOrigin: 'anonymous',
|
||||||
|
},
|
||||||
|
backgroundOptions: {
|
||||||
|
color: '#ffffff',
|
||||||
|
},
|
||||||
|
dotsOptions: {
|
||||||
|
// color: '#41b583',
|
||||||
|
// type: 'rounded' as DotType,
|
||||||
|
...props.dotsOptions,
|
||||||
|
},
|
||||||
|
cornersSquareOptions: {
|
||||||
|
color: props.dotsOptions.color,
|
||||||
|
type: '',
|
||||||
|
// type: 'extra-rounded' as CornerSquareType,
|
||||||
|
// gradient: {
|
||||||
|
// type: 'linear', // 'radial'
|
||||||
|
// rotation: 180,
|
||||||
|
// colorStops: [{ offset: 0, color: '#25456e' }, { offset: 1, color: '#4267b2' }]
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
cornersDotOptions: {
|
||||||
|
color: props.dotsOptions.color,
|
||||||
|
type: 'square' as CornerDotType,
|
||||||
|
// gradient: {
|
||||||
|
// type: 'linear', // 'radial'
|
||||||
|
// rotation: 180,
|
||||||
|
// colorStops: [{ offset: 0, color: '#00266e' }, { offset: 1, color: '#4060b3' }]
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
}
|
||||||
|
if (props.value) {
|
||||||
|
qrCode.update(options)
|
||||||
|
await nextTick()
|
||||||
|
if (!qrCodeDom.value || !qrCodeDom.value.firstChild) return
|
||||||
|
(qrCodeDom.value.firstChild as HTMLElement).setAttribute('style', "width: 100%;") // 强制其适应缩放
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const qrCode = new QRCodeStyling(options)
|
||||||
|
const qrCodeDom = ref<HTMLElement>()
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
render()
|
||||||
|
qrCode.append(qrCodeDom.value)
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
Loading…
x
Reference in New Issue
Block a user