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-styleobject{}

子组件

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

独立二维码 - 自定义元素

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

Qrcode 二维码 - 图2

查看源码在线预览

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

独立二维码

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

Qrcode 二维码 - 图3

查看源码在线预览

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

二维码展示自定义尺寸

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

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

Qrcode 二维码 - 图4

查看源码在线预览

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

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

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

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

Qrcode 二维码 - 图6

查看源码在线预览

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

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

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';
  4. ReactDOM.render(
  5. <div>
  6. <Panel value="https://www.taobao.com" level="L" />
  7. <hr />
  8. <Panel value="https://www.taobao.com" level="M" />
  9. <hr />
  10. <Panel value="https://www.taobao.com" level="Q" />
  11. <hr />
  12. <Panel value="https://www.taobao.com" level="H" />
  13. </div>,
  14. mountNode
  15. );

相关区块

Qrcode 二维码 - 图8

暂无相关区块