Vue与React生成前端二维码的QRcode组件使用

VUE版本：

安装:

npm install qrcode

import QRCode from 'qrcode'

DOM:

<canvas id="canvas"></canvas>

页面调用

this.useqrcode('http://www.baidu.com')

useqrcode(url) {
    const canvas = document.getElementById('canvas')
    QRCode.toCanvas(
        canvas,
        url,
        {
            scale: 5.0,
            height: 180,
            wight: 180
        },
        error => {
            if (error) console.error(error)
            console.log('success!')
        }
    )
}

React版本：

安装:

npm install qrcode

import QRCode from 'qrcode.react'

DOM:

{this.renderCanvas(url)}

渲染:

renderCanvas = url => {
    return (
        <div style={{ width: '200px'}}>
            <p style={{ wordBreak: 'break-all' }}>{url}</p>
            <QRCode
                value={url} //value参数为生成二维码的链接
                size={200} //二维码的宽高尺寸
                fgColor="#000000" //二维码的颜色
            />
        </div>
    )
}