实现二维码组件

Tevin

2022-07-04 763bdcc0d068f5bb62d577814da635ed5235bb06

实现二维码组件

 plugins/qrcode/CQRCode.vue

New file
@@ -0,0 +1,70 @@
/**
 * CQRCode
 * @author Tevin
 */

<template>
    <view class="c-qr-code">
        <canvas ref="canvas"></canvas>
    </view>
</template>

<script>
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
import QRCode from 'qrcode';
import './cQrCode.scss';

export default {
    name: 'CQRCode',
    components: {},
    props: {
        content: {
            type: String,
            default: 'http://www.aisim.cn',
        },
        size: {
            type: Number,
            default: 200,
        },
        margin: {
            type: Number,
            default: 2,
        },
    },
    data() {
        return {};
    },
    methods: {
        _renderQRCode(canvasDom) {
            QRCode.toCanvas(
                canvasDom,
                this.content,
                {
                    width: this.size,
                    margin: this.margin,
                },
                err => {
                    if (err) {
                        console.error(err);
                        return;
                    }
                }
            );
        },
    },
    mounted() {
        if (process.env.TARO_ENV === 'h5') {
            const canvasBox = $(this.$refs.canvas.$el);
            const finderTimer = setInterval(() => {
                const canvasDom = canvasBox.find('canvas');
                if (canvasDom.length > 0) {
                    this._renderQRCode(canvasDom[0]);
                }
            }, 10);
        } else {
            // TODO: 小程序中获取canvas
        }
    },
};
</script>

 plugins/qrcode/cQrCode.scss

New file
@@ -0,0 +1,15 @@
/**
 * CQRCode
 * @author Tevin
 */

@import "../../common/sassMixin";

.c-qr-code {
    text-align: center;
    taro-canvas-core {
        display: inline-block;
        width: auto;
        height: auto;
    }
}

 plugins/qrcode/index.js

New file
@@ -0,0 +1,10 @@
/**
 * qrcode
 * @author Tevin
 */

import CQRCode from '@components/plugins/qrcode/CQRCode.vue';

export {
    CQRCode
}