QR 码扫描已经成为了我们日常生活中不可或缺的一部分。在前端开发中也有很多场景需要使用 QR 码扫描，比如签到、支付等。要实现这些功能需要借助一些工具，其中最方便的就是 npm 包 ember-qr-scanner。
安装
需要先安装 Ember CLI，如果已经安装过则直接执行以下命令：
ember install ember-qr-scanner
使用
在需要使用 QR 码扫描的组件中调用 ember-qr-scanner 组件即可，如下所示：
-- -------------------- ---- -------
------ --------- ---- ---------------------
------ - ------- - ---- --------------------
------ - ------ - ---- ----------------
------ ------- ----- ------------------ ------- --------- -
-------- ---------- - -----
-------
--------------------- -
--------------- - -------
-
-在组件的 template 中添加 ember-qr-scanner 组件，并绑定 onScanSuccess 方法，如下所示：
<EmberQrScanner @onScanSuccess={{this.onScanSuccess}} />
{{#if this.scanResult}}
<p>{{this.scanResult}}</p>
{{/if}}这里的 onScanSuccess 方法会接收到扫描结果并存储到 scanResult 中，在 template 中通过 {{#if}} 判断是否有扫描结果，如果有则展示在页面上。
配置
ember-qr-scanner 提供了一些参数可以用于配置，如下所示：
-- -------------------- ---- ------- --------------- ------------------------------------- ---------------------------------- ---------------- -------------------------- ------------------ -------------------- -------------- ---------------- --
onScanSuccess：扫描成功后的回调函数，会传入扫描结果。preferredFacingMode：优先使用的摄像头（"environment"、"user" 或 "back"）。cameraId：使用的摄像头的 ID，如果指定了此参数则优先使用。enableFileInput：是否启用文件输入，用于识别二维码图片。aspectRatio：摄像区域的宽高比。resolution：摄像区域的分辨率。delay：扫描间隔时间。torch：是否启用手电筒。
示例
下面是一个完整的示例，实现了一个简单的 QR 码扫描器：
-- -------------------- ---- -------
------ --------- ---- ---------------------
------ - ------- - ---- --------------------
------ - ------ - ---- ----------------
------ ------- ----- ------------------ ------- --------- -
-------- ---------- - -----
-------
--------------------- -
--------------- - -------
-
-<EmberQrScanner @onScanSuccess={{this.onScanSuccess}} />
{{#if this.scanResult}}
<p>{{this.scanResult}}</p>
{{/if}}总结
通过使用 ember-qr-scanner，可以很方便地实现 QR 码扫描的功能。同时，也可以通过配置参数来满足不同的需求。希望本文对大家学习和使用 ember-qr-scanner 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e18a563576b7b1ecb49