Qrcode 二维码

二维码组件

参数（Props）

参数名 说明 必填 类型 默认值 可选值
value 二维码的展示内容 是 string 无
size 二维码的尺寸 否 number 128
bgColor 二维码背景色 否 string #ffffff
fgColor 二维码前景色 否 string #000000
level 二维码的纠错等级 否 string L [L, M, Q, H]
text 二维码下方文案 否 string 无
align 二维码展示位置 否 string left [left, right, top, bottom]
triggerSize 触发器 icon 的大小 否 string medium 可选 xxs, xs, small, medium, large, xl, xxl
triggerStyle 触发器 icon 的 inline-style 否 object {}

子组件

Qrcode.Panel

直接展示的二维码组件

参数（Props）

参数 说明 必填 类型 默认值 可选值
value 二维码的展示内容 是 string 无
size 二维码的尺寸 否 number 128
bgColor 二维码背景色 否 string #ffffff
fgColor 二维码前景色 否 string #000000
level 二维码的纠错等级 否 string L [L, M, Q, H]
text 二维码下方文案 否 string 无

DEMO 列表

简单的用法

展示二维码, 默认左侧浮出, 可设置 align="right" 右边浮出.

triggerSize 可选值： xxs, xs, small, medium, large, xl, xxl

import React from 'react';
import Qrcode from '@icedesign/qrcode';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div>
    <div>
      <p>分别演示二维码上下左右展示的效果</p>
      <div style={{ textAlign: 'center' }}>
        <span>左 </span>
        <Qrcode value="http://www.taobao.com" text="手机淘宝扫码查看" />
        &nbsp;&nbsp;
        <span>上 </span>
        <Qrcode
          value="https://alibaba.github.io/ice"
          text="进入 ICE 官网"
          align="top"
        />
        &nbsp;&nbsp;
        <span>下 </span>
        <Qrcode
          value="https://alibaba.github.io/ice"
          text="进入 ICE 官网"
          align="bottom"
        />
        &nbsp;&nbsp;
        <span>右 </span>
        <Qrcode
          value="https://alibaba.github.io/ice"
          text="进入 ICE 官网"
          align="right"
        />
      </div>
    </div>
    <div>
      <p>支持通过 triggerSize props 设置 Icon 大小</p>
      <Qrcode
        triggerSize="xxs"
        value="https://alibaba.github.io/ice"
        text="进入 ICE 官网"
        align="right"
      />
      <br />
      <Qrcode
        triggerSize="xs"
        value="https://alibaba.github.io/ice"
        text="进入 ICE 官网"
        align="right"
      />
      <br />
      <Qrcode
        triggerSize="small"
        value="https://alibaba.github.io/ice"
        text="进入 ICE 官网"
        align="right"
      />
      <br />
      <Qrcode
        triggerSize="medium"
        value="https://alibaba.github.io/ice"
        text="进入 ICE 官网"
        align="right"
      />
      <br />
      <Qrcode
        triggerSize="large"
        value="https://alibaba.github.io/ice"
        text="进入 ICE 官网"
        align="right"
      />
      <br />
      <Qrcode
        triggerSize="xl"
        value="https://alibaba.github.io/ice"
        text="进入 ICE 官网"
        align="right"
      />
      <br />
      <Qrcode
        triggerSize="xxl"
        value="https://alibaba.github.io/ice"
        text="进入 ICE 官网"
        align="right"
      />
      <br />
    </div>
  </div>,
  mountNode
);

独立二维码 - 自定义元素

直接展示二维码，没有 Hover 的动作过程。

import React from 'react';
import ReactDOM from 'react-dom';
import Qrcode, { Panel } from '@icedesign/qrcode';

ReactDOM.render(
  <Panel
    value="https://www.taobao.com"
    text={<div style={{ color: 'red' }}>复制连接</div>}
  />,
  mountNode
);

独立二维码

直接展示二维码，没有 Hover 的动作过程。

import React from 'react';
import ReactDOM from 'react-dom';
import Qrcode, { Panel } from '@icedesign/qrcode';

ReactDOM.render(
  <Panel value="https://www.taobao.com" text="使用手机淘宝扫码查看" />,
  mountNode
);

二维码展示自定义尺寸

size 可设置二维码尺寸大小默认为：128。

大小直接展示二维码，没有 Hover 的动作过程。尺寸为 150

import React from 'react';
import ReactDOM from 'react-dom';
import Qrcode, { Panel } from '@icedesign/qrcode';

ReactDOM.render(<Panel value="https://www.taobao.com" size={150} />, mountNode);

二维码展示自定义颜色

直接展示二维码，没有 Hover 的动作过程。颜色为红色。

fgColor 前景色默认为黑色，以下展示修改橙色 #ff4400。

import React from 'react';
import ReactDOM from 'react-dom';
import Qrcode, { Panel } from '@icedesign/qrcode';

ReactDOM.render(
  <Panel value="https://www.taobao.com" fgColor="#ff4400" />,
  mountNode
);

二维码展示自定义背景颜色

直接展示二维码，没有 Hover 的动作过程。

bgColor 背景色默认为白色 #ffffff，以下展示修改橙色 #ff4400。

import React from 'react';
import ReactDOM from 'react-dom';
import Qrcode, { Panel } from '@icedesign/qrcode';

ReactDOM.render(
  <Panel value="https://www.taobao.com" bgColor="#ff4400" />,
  mountNode
);

二维码展示自定义编码等级

level 二维码中有四种级别的纠错，二维码中有四种级别的纠错。默认为： L

纠错等级 修正率
L 水平 7%的字码可被修正
M 水平 15%的字码可被修正
Q 水平 25%的字码可被修正
H 水平 30%的字码可被修正 
import React from 'react';
import ReactDOM from 'react-dom';
import Qrcode, { Panel } from '@icedesign/qrcode';

ReactDOM.render(
  <div>
    <Panel value="https://www.taobao.com" level="L" />
    <hr />
    <Panel value="https://www.taobao.com" level="M" />
    <hr />
    <Panel value="https://www.taobao.com" level="Q" />
    <hr />
    <Panel value="https://www.taobao.com" level="H" />
  </div>,
  mountNode
);