myprint-design
Version:
操作简单，组件丰富的一站式打印解决方案打印设计器
1 lines • 6.16 kB
Source Map (JSON)
{"version":3,"file":"qrcode.vue2.mjs","sources":["../../../../../../src/components/design/qrcode/qrcode.vue"],"sourcesContent":["<template>\n <div class=\"display-flex\"\n :style=\"style\">\n <img ref=\"qrCode\" style=\"object-fit: cover; width: 100%; height: 100%\" id=\"qrCode\" alt=\"\" :src=\"src\" />\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { MyElement } from '@myprint/design/types/entity';\nimport { computed, nextTick, ref, watch } from 'vue-demi';\nimport { unit2px } from '@myprint/design/utils/devicePixelRatio';\nimport QRCode from 'qrcode';\nimport { displayDesign, elementCommonStyle, getRecursionParentPanel } from '@myprint/design/utils/elementUtil';\nimport { updateMoveableRect } from '@myprint/design/plugins/moveable/moveable';\nimport { throttle } from 'lodash';\nimport { _defaultNum } from '@myprint/design/utils/numberUtil';\nimport { _defaultVal } from '@myprint/design/utils/utils';\n\nconst props = withDefaults(defineProps<{\n element?: MyElement\n}>(), {\n element: () => ({} as MyElement)\n});\n\nconst qrCode = ref();\nconst src = ref();\n\nconst style = computed(() => {\n return elementCommonStyle(props.element);\n});\n\nfunction freshQrCode(resetHeight: boolean) {\n if (qrCode.value == null) {\n return;\n }\n if (props.element.data == null) {\n return;\n }\n if (props.element.data == '') {\n return;\n }\n QRCode.toDataURL(props.element.data, {\n // version: 1,\n errorCorrectionLevel: _defaultVal(props.element.option.qrErrorCorrectionLevel, 'Q',), // low, medium, quartile, high or L, M, Q, H\n maskPattern: 7, // 0, 1, 2, 3, 4, 5, 6, 7\n margin: 0, // Define how much wide the quiet zone should be\n scale: 4,\n width: unit2px(Math.min(props.element.width, props.element.height), getRecursionParentPanel(props.element)) * _defaultNum(props.element.option.qrCodeScale, 5), // 宽度\n color: {\n light: props.element.option.background, // 背景色\n dark: props.element.option.color // 二维码颜色\n }\n }, (error, url) => {\n if (error) {\n console.error(error);\n return;\n }\n \n src.value = url;\n });\n \n if (resetHeight && props.element.runtimeOption.workEnvironment !== 'DataTable') {\n props.element.height = props.element.width;\n props.element.runtimeOption.height = props.element.runtimeOption.width;\n props.element.runtimeOption.init.height = props.element.runtimeOption.width;\n if (displayDesign(props.element)) {\n nextTick(() => {\n updateMoveableRect();\n });\n }\n }\n}\n\nconst freshQrCodeThrottle = throttle((resetHeight: boolean) => {\n freshQrCode(resetHeight);\n}, 100);\n\nwatch([() => qrCode.value, () => props.element.data, () => props.element.option.color, () => props.element.option.background, () => props.element.option.qrErrorCorrectionLevel, () => props.element.option.qrCodeScale], (_n, _o) => {\n if (displayDesign(props.element)) {\n freshQrCodeThrottle(true);\n } else {\n freshQrCode(true);\n }\n}, { immediate: true });\n\nwatch([() => props.element.width, () => props.element.height], (_n, _o) => {\n if (displayDesign(props.element)) {\n freshQrCodeThrottle(false);\n } else {\n freshQrCode(false);\n }\n}, { immediate: true });\n</script>\n"],"names":[],"mappings":"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"}