React Js 生成二維碼 插件 qrcode.react

1. qrcode 是一個js插件，具體可以github，這邊不多介紹。
2. qrcode.react這個是修改爲React的一個插件。
3. 具體是生成二維碼的原理是什麼，這邊也不多做介紹。

下面介紹如何使用，或封裝。

package.json添加：

"qrcode.react": "^0.6.1",
"copy-to-clipboard": "^3.0.5"

npm install 
webpack
webpack-dev-server

下面代碼第一個註釋，是指QRcode組件如何使用，第二個註釋是介紹這個封裝後的組件如何使用。相信大家都看得懂。這邊用了antd，如果不需要，請自行刪除。複製插件我的博客有介紹，大家自行翻閱。

/**
 * Created by wuyakun on 2017/3/23.
 * 二維碼
 *
 * eg:<QRCode value="http://facebook.github.io/react/" />
 *
 prop    type    default value
 value    string
 size    number    128
 bgColor    string (CSS color)    "#FFFFFF"
 fgColor    string (CSS color)    "#000000"
 level    string ('L' 'M' 'Q' 'H')    'L'
 */

import {Input, message, Modal, Icon} from 'antd';
import React from 'react';
const QRCode = require('qrcode.react');
import copy from 'copy-to-clipboard';

/**
 * 二維碼
 <QRCodeModal
 url={this.state.qrcodeURL}
 ref="modal"
 size={150}/>
 */

class QRCodeModal extends React.Component {

    constructor() {
        super();
        this.state = {
            visible: false,
            url: '',
            size: 150,
        };
    }

    showModal = () => {
        this.setState({
            visible: true,
            url: this.props.url,
            size: this.props.size,
        });
    };

    handleOk = () => {
        this.setState({
            visible: false
        });
    };

    handleCancel = () => {
        this.setState({
            visible: false,
        });
    };

    copyUrl = () => {
        try {
            //const url = this.refs.url;
            // url.select();
            // document.execCommand('Copy');
            copy(this.props.url);
        } catch (e) {
            console.log(e);
        }
        message.success('複製成功，如果失敗，請在輸入框內手動複製.');
    };

    render() {
        return (
            <div >
                <Modal title='活動鏈接'
                       width={500}
                       visible={this.state.visible}
                       onOk={this.handleOk}
                       onCancel={this.handleCancel}
                       footer="">

                    <div style={{float: 'left', width: this.props.size}}>
                        <QRCode
                            size={this.state.size}
                            value={this.state.url}/>

                        <div style={{textAlign: 'center', marginTop: 10}}>
                            微信掃一掃
                        </div>
                    </div>

                    <div style={{width: 300, float: 'right'}}>
                        <div >
                            <span>
                                鏈接地址
                            </span>

                            <div style={{marginTop: 10, marginBottom: 10}}>
                                <Input
                                    ref='url'
                                    addonAfter={<Icon type="copy" onClick={this.copyUrl}/>}
                                    value={this.props.url}/>
                            </div>
                            <span>
                                可將鏈接複製到您的公衆號菜單中
                            </span>
                        </div>
                    </div>

                    <div style={{clear: 'both'}}>
                    </div>

                </Modal>
            </div>
        );
    }
}

export default QRCodeModal;