From d3e3afe22c344ee7de73dcd746440ef1ff949fae Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Tue, 10 Oct 2023 17:35:23 +0800
Subject: [PATCH] 微调组件在小程序中的显示
---
plugins/qrcode/CQRCode.vue | 46 ++++++++++++++++++++++++++++++++++++++++------
1 files changed, 40 insertions(+), 6 deletions(-)
diff --git a/plugins/qrcode/CQRCode.vue b/plugins/qrcode/CQRCode.vue
index ef9fe4a..49a71aa 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,17 +40,37 @@
type: Number,
default: 2,
},
+ // 是否显示保存到手机
+ downloadable: {
+ type: Boolean,
+ default: false,
+ },
},
data() {
- return {};
+ return {
+ lastContent: '',
+ };
},
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 => {
@@ -58,9 +87,14 @@
const canvasBox = $(this.$refs.canvas.$el);
const finderTimer = setInterval(() => {
const canvasDom = canvasBox.find('canvas');
- if (canvasDom.length > 0) {
- this._renderQRCode(canvasDom[0]);
+ if (canvasDom.length === 0) {
+ return;
}
+ if (this.lastContent === this.content) {
+ return;
+ }
+ this._renderQRCodeH5(canvasDom[0]);
+ this.lastContent = this.content;
}, 10);
} else {
// TODO: 小程序中获取canvas
--
Gitblit v1.9.1