Qrcode 二维码

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

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

二维码组件

参数（Props）

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

子组件

Qrcode.Panel

直接展示的二维码组件

参数（Props）

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

代码示例

简单的用法

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

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

Qrcode 二维码 - 图1

查看源码在线预览

  1. import React from 'react';
  2. import Qrcode from '@icedesign/qrcode';
  3. import ReactDOM from 'react-dom';
  5. ReactDOM.render(
  6.   <div>
  7.     <div>
  8.       <p>分别演示二维码上下左右展示的效果</p>
  9.       <div style={{ textAlign: 'center' }}>
  10.         <span>左 </span>
  11.         <Qrcode value="http://www.taobao.com" text="手机淘宝扫码查看" />
  12.         &nbsp;&nbsp;
  13.         <span>上 </span>
  14.         <Qrcode
  15.           value="https://alibaba.github.io/ice"
  16.           text="进入 ICE 官网"
  17.           align="top"
  18.         />
  19.         &nbsp;&nbsp;
  20.         <span>下 </span>
  21.         <Qrcode
  22.           value="https://alibaba.github.io/ice"
  23.           text="进入 ICE 官网"
  24.           align="bottom"
  25.         />
  26.         &nbsp;&nbsp;
  27.         <span>右 </span>
  28.         <Qrcode
  29.           value="https://alibaba.github.io/ice"
  30.           text="进入 ICE 官网"
  31.           align="right"
  32.         />
  33.       </div>
  34.     </div>
  35.     <div>
  36.       <p>支持通过 triggerSize props 设置 Icon 大小</p>
  37.       <Qrcode
  38.         triggerSize="xxs"
  39.         value="https://alibaba.github.io/ice"
  40.         text="进入 ICE 官网"
  41.         align="right"
  42.       />
  43.       <br />
  44.       <Qrcode
  45.         triggerSize="xs"
  46.         value="https://alibaba.github.io/ice"
  47.         text="进入 ICE 官网"
  48.         align="right"
  49.       />
  50.       <br />
  51.       <Qrcode
  52.         triggerSize="small"
  53.         value="https://alibaba.github.io/ice"
  54.         text="进入 ICE 官网"
  55.         align="right"
  56.       />
  57.       <br />
  58.       <Qrcode
  59.         triggerSize="medium"
  60.         value="https://alibaba.github.io/ice"
  61.         text="进入 ICE 官网"
  62.         align="right"
  63.       />
  64.       <br />
  65.       <Qrcode
  66.         triggerSize="large"
  67.         value="https://alibaba.github.io/ice"
  68.         text="进入 ICE 官网"
  69.         align="right"
  70.       />
  71.       <br />
  72.       <Qrcode
  73.         triggerSize="xl"
  74.         value="https://alibaba.github.io/ice"
  75.         text="进入 ICE 官网"
  76.         align="right"
  77.       />
  78.       <br />
  79.       <Qrcode
  80.         triggerSize="xxl"
  81.         value="https://alibaba.github.io/ice"
  82.         text="进入 ICE 官网"
  83.         align="right"
  84.       />
  85.       <br />
  86.     </div>
  87.   </div>,
  88.   mountNode
  89. );

独立二维码 - 自定义元素

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

Qrcode 二维码 - 图2

查看源码在线预览

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import Qrcode, { Panel } from '@icedesign/qrcode';
  5. ReactDOM.render(
  6.   <Panel
  7.     value="https://www.taobao.com"
  8.     text={<div style={{ color: 'red' }}>复制连接</div>}
  9.   />,
  10.   mountNode
  11. );

独立二维码

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

Qrcode 二维码 - 图3

查看源码在线预览

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import Qrcode, { Panel } from '@icedesign/qrcode';
  5. ReactDOM.render(
  6.   <Panel value="https://www.taobao.com" text="使用手机淘宝扫码查看" />,
  7.   mountNode
  8. );

二维码展示自定义尺寸

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

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

Qrcode 二维码 - 图4

查看源码在线预览

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import Qrcode, { Panel } from '@icedesign/qrcode';
  5. ReactDOM.render(<Panel value="https://www.taobao.com" size={150} />, mountNode);

二维码展示自定义颜色

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

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

Qrcode 二维码 - 图5

查看源码在线预览

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import Qrcode, { Panel } from '@icedesign/qrcode';
  5. ReactDOM.render(
  6.   <Panel value="https://www.taobao.com" fgColor="#ff4400" />,
  7.   mountNode
  8. );

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

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

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

Qrcode 二维码 - 图6

查看源码在线预览

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import Qrcode, { Panel } from '@icedesign/qrcode';
  5. ReactDOM.render(
  6.   <Panel value="https://www.taobao.com" bgColor="#ff4400" />,
  7.   mountNode
  8. );

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

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

纠错等级修正率
L 水平7%的字码可被修正
M 水平15%的字码可被修正
Q 水平25%的字码可被修正
H 水平30%的字码可被修正

Qrcode 二维码 - 图7

查看源码在线预览

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import Qrcode, { Panel } from '@icedesign/qrcode';
  5. ReactDOM.render(
  6.   <div>
  7.     <Panel value="https://www.taobao.com" level="L" />
  8.     <hr />
  9.     <Panel value="https://www.taobao.com" level="M" />
  10.     <hr />
  11.     <Panel value="https://www.taobao.com" level="Q" />
  12.     <hr />
  13.     <Panel value="https://www.taobao.com" level="H" />
  14.   </div>,
  15.   mountNode
  16. );

相关区块

Qrcode 二维码 - 图8

暂无相关区块