From 08abfcfea8247c394b2034cad59734846b403dd9 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期一, 28 十月 2024 22:22:58 +0800
Subject: [PATCH] 计划任务优化
---
src/components/Qrcode/src/Qrcode.vue | 200 +++++++++++++++++++++++++------------------------
1 files changed, 101 insertions(+), 99 deletions(-)
diff --git a/src/components/Qrcode/src/Qrcode.vue b/src/components/Qrcode/src/Qrcode.vue
index 81194e1..779caee 100644
--- a/src/components/Qrcode/src/Qrcode.vue
+++ b/src/components/Qrcode/src/Qrcode.vue
@@ -3,110 +3,112 @@
<component :is="tag" ref="wrapRef" />
</div>
</template>
-<script lang="ts">
- import { defineComponent, watch, PropType, ref, unref, onMounted } from 'vue';
+<script lang="ts" setup>
+ import { watch, PropType, ref, unref, onMounted } from 'vue';
import { toCanvas, QRCodeRenderersOptions, LogoType } from './qrcodePlus';
import { toDataURL } from 'qrcode';
- import { downloadByUrl } from '/@/utils/file/download';
+ import { downloadByUrl } from '@/utils/file/download';
import { QrcodeDoneEventParams } from './typing';
- export default defineComponent({
- name: 'QrCode',
- props: {
- value: {
- type: [String, Array] as PropType<string | any[]>,
- default: null,
- },
- // 鍙傛暟
- options: {
- type: Object as PropType<QRCodeRenderersOptions>,
- default: null,
- },
- // 瀹藉害
- width: {
- type: Number as PropType<number>,
- default: 200,
- },
- // 涓棿logo鍥炬爣
- logo: {
- type: [String, Object] as PropType<Partial<LogoType> | string>,
- default: '',
- },
- // img 涓嶆敮鎸佸唴宓宭ogo
- tag: {
- type: String as PropType<'canvas' | 'img'>,
- default: 'canvas',
- validator: (v: string) => ['canvas', 'img'].includes(v),
- },
+ defineOptions({ name: 'QrCode' });
+
+ const props = defineProps({
+ value: {
+ type: [String, Array] as PropType<string | any[]>,
+ default: null,
},
- emits: { done: (data: QrcodeDoneEventParams) => !!data, error: (error: any) => !!error },
- setup(props, { emit }) {
- const wrapRef = ref<HTMLCanvasElement | HTMLImageElement | null>(null);
- async function createQrcode() {
- try {
- const { tag, value, options = {}, width, logo } = props;
- const renderValue = String(value);
- const wrapEl = unref(wrapRef);
-
- if (!wrapEl) return;
-
- if (tag === 'canvas') {
- const url: string = await toCanvas({
- canvas: wrapEl,
- width,
- logo: logo as any,
- content: renderValue,
- options: options || {},
- });
- emit('done', { url, ctx: (wrapEl as HTMLCanvasElement).getContext('2d') });
- return;
- }
-
- if (tag === 'img') {
- const url = await toDataURL(renderValue, {
- errorCorrectionLevel: 'H',
- width,
- ...options,
- });
- (unref(wrapRef) as HTMLImageElement).src = url;
- emit('done', { url });
- }
- } catch (error) {
- emit('error', error);
- }
- }
- /**
- * file download
- */
- function download(fileName?: string) {
- let url = '';
- const wrapEl = unref(wrapRef);
- if (wrapEl instanceof HTMLCanvasElement) {
- url = wrapEl.toDataURL();
- } else if (wrapEl instanceof HTMLImageElement) {
- url = wrapEl.src;
- }
- if (!url) return;
- downloadByUrl({
- url,
- fileName,
- });
- }
-
- onMounted(createQrcode);
-
- // 鐩戝惉鍙傛暟鍙樺寲閲嶆柊鐢熸垚浜岀淮鐮�
- watch(
- props,
- () => {
- createQrcode();
- },
- {
- deep: true,
- },
- );
-
- return { wrapRef, download };
+ // 鍙傛暟
+ options: {
+ type: Object as PropType<QRCodeRenderersOptions>,
+ default: null,
+ },
+ // 瀹藉害
+ width: {
+ type: Number as PropType<number>,
+ default: 200,
+ },
+ // 涓棿logo鍥炬爣
+ logo: {
+ type: [String, Object] as PropType<Partial<LogoType> | string>,
+ default: '',
+ },
+ // img 涓嶆敮鎸佸唴宓宭ogo
+ tag: {
+ type: String as PropType<'canvas' | 'img'>,
+ default: 'canvas',
+ validator: (v: string) => ['canvas', 'img'].includes(v),
},
});
+
+ const emit = defineEmits({
+ done: (data: QrcodeDoneEventParams) => !!data,
+ error: (error: any) => !!error,
+ });
+
+ const wrapRef = ref<HTMLCanvasElement | HTMLImageElement | null>(null);
+ async function createQrcode() {
+ try {
+ const { tag, value, options = {}, width, logo } = props;
+ const renderValue = String(value);
+ const wrapEl = unref(wrapRef);
+
+ if (!wrapEl) return;
+
+ if (tag === 'canvas') {
+ const url: string = await toCanvas({
+ canvas: wrapEl,
+ width,
+ logo: logo as any,
+ content: renderValue,
+ options: options || {},
+ });
+ emit('done', { url, ctx: (wrapEl as HTMLCanvasElement).getContext('2d') });
+ return;
+ }
+
+ if (tag === 'img') {
+ const url = await toDataURL(renderValue, {
+ errorCorrectionLevel: 'H',
+ width,
+ ...options,
+ });
+ (unref(wrapRef) as HTMLImageElement).src = url;
+ emit('done', { url });
+ }
+ } catch (error) {
+ emit('error', error);
+ }
+ }
+ /**
+ * file download
+ */
+ function download(fileName?: string) {
+ let url = '';
+ const wrapEl = unref(wrapRef);
+ if (wrapEl instanceof HTMLCanvasElement) {
+ url = wrapEl.toDataURL();
+ } else if (wrapEl instanceof HTMLImageElement) {
+ url = wrapEl.src;
+ }
+ if (!url) return;
+ downloadByUrl({
+ url,
+ fileName,
+ });
+ }
+
+ onMounted(createQrcode);
+
+ // 鐩戝惉鍙傛暟鍙樺寲閲嶆柊鐢熸垚浜岀淮鐮�
+ watch(
+ props,
+ () => {
+ createQrcode();
+ },
+ {
+ deep: true,
+ },
+ );
+
+ defineExpose({ download });
</script>
--
Gitblit v1.9.3