千分位方法说明

chensiAb

2025-01-14 e8265fcb603358426f2dbe06193a86ccf6332ad0

 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>