Qrcode 二维码

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/qrcode@1.0.4 -S

二维码组件

参数（Props）

子组件

Qrcode.Panel

直接展示的二维码组件

参数（Props）

代码示例

简单的用法

展示二维码, 默认左侧浮出, 可设置 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
);

相关区块

暂无相关区块