【arale-qrcode二次封装食用】前端生成二维码无需联网

最新推荐文章于 2024-02-21 15:53:13 发布

luna*?????

最新推荐文章于 2024-02-21 15:53:13 发布

阅读量246

点赞数

文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/weixin_47120900/article/details/130526396

版权

封装一个二维码的弹窗

import React, { useState, useEffect, useRef } from 'react';
import { Modal } from 'antd';
import {
    CopyOutlined,
    CheckCircleOutlined,
    CloseCircleOutlined,
    CloseOutlined,
    CheckOutlined,
    QrcodeOutlined,
} from '@ant-design/icons';

import AraleQRCode from 'arale-qrcode';
let refreshTimer = null;
export default ({ QrCode, isQrcodeModalVisible, setIsQrcodeModalVisible }) => {
    const svg = useRef(null);

    useEffect(() => {
        clearTimeout(refreshTimer);

        refreshTimer = setTimeout(() => {
            autoSearch();
        }, 100);
    }, [QrCode]);
    const autoSearch = () => {
        const result = new AraleQRCode({
            render: 'svg' /*  生成的类型 'svg' or 'table dom元素类型 */,
            text: JSON.stringify(QrCode) /* 二维码的链接*/,
            size: 200 /* 二维码的大小 */,
        });
        if (svg.current) {
            svg.current.appendChild(result);
            console.log('webCode', QrCode);
        }
    };

    const handleOk = () => {
        setIsQrcodeModalVisible(false);
    };

    const handleCancel = () => {
        setIsQrcodeModalVisible(false);
    };

    return (
        <div>
            <Modal
                title="扫描二维码获取机器码"
                visible={isQrcodeModalVisible}
                onOk={handleOk}
                onCancel={handleCancel}
                width={273}
                footer={false}
            >
                <div>
                    <div style={{ marginLeft: 15 }} ref={svg}></div>
                </div>
            </Modal>
        </div>
    );
};

食用

   <QrCodeModal
          QrCode={QrCode}
          isQrcodeModalVisible={isQrcodeModalVisible}
          setIsQrcodeModalVisible={setIsQrcodeModalVisible}
        ></QrCodeModal>