From 948a19c73263a495bb065e9cb48db7baba99ff12 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Tue, 04 Mar 2025 14:33:56 +0800
Subject: [PATCH] Merge branch 'master' of ssh://dev.zhiheiot.com:29418/mob-components
---
plugins/qrcode/CQRCode.vue | 44 +++++++++++++++++++++++++++++++++++++-------
1 files changed, 37 insertions(+), 7 deletions(-)
diff --git a/plugins/qrcode/CQRCode.vue b/plugins/qrcode/CQRCode.vue
index 8acaae5..5658468 100644
--- a/plugins/qrcode/CQRCode.vue
+++ b/plugins/qrcode/CQRCode.vue
@@ -6,18 +6,27 @@
<template>
<view class="c-qr-code">
<canvas ref="canvas"></canvas>
+ <AtButton
+ v-if="downloadable"
+ type="primary"
+ full
+ :onClick="evt => handleSaveToAlbum()"
+ >保存到手机</AtButton>
</view>
</template>
<script>
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
+import { AtButton } from 'taro-ui-vue';
import QRCode from 'qrcode';
import './cQrCode.scss';
export default {
name: 'CQRCode',
- components: {},
+ components: {
+ AtButton,
+ },
props: {
content: {
type: String,
@@ -31,6 +40,11 @@
type: Number,
default: 2,
},
+ // 是否显示保存到手机
+ downloadable: {
+ type: Boolean,
+ default: false,
+ },
},
data() {
return {
@@ -38,12 +52,25 @@
};
},
methods: {
- _renderQRCode(canvasDom) {
+ handleSaveToAlbum() {
+ if (process.env.TARO_ENV === 'h5') {
+ const canvasBox = $(this.$refs.canvas.$el);
+ const canvasDom = canvasBox.find('canvas')[0];
+ const dataURL = canvasDom.toDataURL('image/png', 1);
+ const a = document.createElement('a');
+ a.download = 'qrcode.png';
+ a.href = dataURL;
+ a.dispatchEvent(new MouseEvent('click'));
+ } else {
+ // TODO: 小程序中下载
+ }
+ },
+ _renderQRCodeH5(canvasDom) {
QRCode.toCanvas(
canvasDom,
this.content,
{
- width: this.size,
+ width: this.size * 2,
margin: this.margin,
},
err => {
@@ -51,14 +78,14 @@
console.error(err);
return;
}
- }
+ },
);
},
},
mounted() {
if (process.env.TARO_ENV === 'h5') {
const canvasBox = $(this.$refs.canvas.$el);
- const finderTimer = setInterval(() => {
+ this.finderTimer = setInterval(() => {
const canvasDom = canvasBox.find('canvas');
if (canvasDom.length === 0) {
return;
@@ -66,12 +93,15 @@
if (this.lastContent === this.content) {
return;
}
- this._renderQRCode(canvasDom[0]);
+ this._renderQRCodeH5(canvasDom[0]);
this.lastContent = this.content;
- }, 10);
+ }, 100);
} else {
// TODO: 小程序中获取canvas
}
},
+ beforeDestroy() {
+ clearInterval(this.finderTimer);
+ },
};
</script>
\ No newline at end of file
--
Gitblit v1.9.1