@bitjson/qr-code

一个没有框架的,可定制的,可动的, <qr-code> HTML 元素。 只是一个自成一体 网络组件。 。 。 .

https://user-images.githubusercontent.com/904007/221692053-1f4ab516-0f63-40e4-b1da-1922ba906963.mp4 (中文(简体) )

尝试此交互式演示 : qr.bitjson.com (中文(简体) )

使用量

导入 @bitjson/qr-code 使用您的构建系统或框架(例如). npm install @bitjson/qr-code),或者在 HTML 中使用独立的脚本 <head> 元素 :

<script src="https://unpkg.com/@bitjson/[email protected]/dist/qr-code.js"></script>

然后在 HTML 中任意使用组件 <body> 元素 :

<qr-code contents="https://bitjson.com"></qr-code>

完整示例

以下是使用大多数特性的纯 HTML 示例 :

<qr-code
  id="qr1"
  contents="https://bitjson.com/"
  module-color="#1c7d43"
  position-ring-color="#13532d"
  position-center-color="#70c559"
  mask-x-to-y-ratio="1.2"
  style="
    width: 200px;
    height: 200px;
    margin: 2em auto;
    background-color: #fff;
  "
>
  <img src="assets/1.2-x-to-y-ratio-icon.svg" slot="icon" />
</qr-code>

<script>
  document.getElementById('qr1').addEventListener('codeRendered', () => {
    document.getElementById('qr1').animateQRCode('MaterializeIn');
  });
</script>

动画

激活 激活用户交互, 如 URL 点击或检测到支付, 或当 QR 代码交互完成时激活 .

有几个预设动画可供使用, 只需用元素的运行即可 animateQRCode 方法 :

document.getElementById('qr1').animateQRCode('RadialRipple');

可用的内置预设 :

• FadeInTopDown
• FadeInCenterOut
• MaterializeIn
• RadialRipple
• RadialRippleIn

你也可以设计自己的自定义动画! 只要传递一个函数给 qr-code是因为 animateQRCode 方法,例如:

document
  .getElementById('qr1')
  .animateQRCode((targets, _x, _y, _count, entity) => ({
    targets,
    from: entity === 'module' ? Math.random() * 200 : 200,
    duration: 500,
    easing: 'cubic-bezier(.5,0,1,1)',
    web: { opacity: [1, 0], scale: [1, 1.1, 0.5] },
  }));

这个 内建预设在内部使用此 API以便你们观察那些教诲和启示。 欢迎拉出新的预设!

动画预览器

这个 动画预览器使动画的微调容易得多:通过克隆此重播并运行活装包脚本来尝试:

git clone https://github.com/bitjson/qr-code.git
cd qr-code
npm ci
npm start

然后在动画中工作 src/index.html 使用动画预览器(位于窗口右下方)以各种速度测试上次运行的动画,手动刷取,或倒置播放.

生产建设

禁用 just-animate 播放器在 src/components/qr-code/qr-code.tsx,然后构建:

npm run build

您可以将脚本指向 index.html 改为 dist/qr-code.js 然后通过本地文件系统打开页面.