github/poster-design
1
0
Fork 0
mirror of https://github.com/palxiao/poster-design.git synced 2025-07-15 16:02:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

update: formatting qrcode component

Browse Source
This commit is contained in:
IchliebedichZhu 2024-03-04 18:08:36 +00:00
parent 507de91843
commit d6f9574331
2 changed files with 61 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/business/qrcode/index.vue
View File

@ -11,10 +11,11 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref, watch, nextTick, defineProps } from 'vue' import { onMounted, ref, watch, nextTick, defineProps } from 'vue'
import QRCodeStyling, { DrawType, TypeNumber, Mode, ErrorCorrectionLevel, DotType, CornerSquareType, CornerDotType, } from 'qr-code-styling' import QRCodeStyling, {DotType, Options } from 'qr-code-styling'
import { debounce } from 'throttle-debounce' import { debounce } from 'throttle-debounce'
import { generateOption } from './method'
type TProps = { export type TQrcodeProps = {
width?: number width?: number
height?: number height?: number
image?: string image?: string
@ -25,7 +26,7 @@ type TProps = {
} }
} }
const props = withDefaults(defineProps<TProps>(), { const props = withDefaults(defineProps<TQrcodeProps>(), {
width: 300, width: 300,
height: 300, height: 300,
dotsOptions: () => ({ dotsOptions: () => ({
@ -34,7 +35,7 @@ const props = withDefaults(defineProps<TProps>(), {
}) })
}) })
let options = {} let options: Options = {}
watch( watch(
() => [props.width, props.height, props.dotsOptions], () => [props.width, props.height, props.dotsOptions],
() => { () => {
@ -43,56 +44,11 @@ watch(
) )
const render = debounce(300, false, async () => { const render = debounce(300, false, async () => {
options = { options = generateOption(props)
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) { if (props.value) {
qrCode.update(options) options && qrCode.update(options)
await nextTick() await nextTick()
if (!qrCodeDom.value || !qrCodeDom.value.firstChild) return if (!qrCodeDom?.value?.firstChild) return
(qrCodeDom.value.firstChild as HTMLElement).setAttribute('style', "width: 100%;") // 强制其适应缩放 (qrCodeDom.value.firstChild as HTMLElement).setAttribute('style', "width: 100%;") // 强制其适应缩放
} }
}) })

53
src/components/business/qrcode/method.ts Normal file
View File

@ -0,0 +1,53 @@
import { CornerDotType, CornerSquareType, DrawType, ErrorCorrectionLevel, Mode, Options, TypeNumber } from "qr-code-styling"
import { TQrcodeProps } from "./index.vue"
/** 生成二维码数据 */
export function generateOption(props: TQrcodeProps): Options {
return {
width: props.width,
height: props.height,
type: 'canvas', // canvas svg
data: props.value,
image: props.image, // /favicon.svg
margin: 0,
qrOptions: {
typeNumber: 3,
mode: 'Byte',
errorCorrectionLevel: 'M',
},
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' }]
// },
},
}
}