原生Vue实现二维码扫一扫

通过使用 vue-qrcode-reader 进行实现，必须是 Https 或 Localhost

vue-qrcode-reader

yarn add vue-qrcode-reader --save

使用步骤

1.引入库(全局引入)

代码如下（示例）main.js：

import VueQrcodeReader from "vue-qrcode-reader";
Vue.use(VueQrcodeReader);

2.使用

代码如下（示例）：

<p class="error">{{ error }}</p>
<p class="decode-result">
Last result: <b>{{ result }}</b>
</p>
<qrcode-stream @decode="onDecode" @init="onInit" />
{{ result }}

async onInit(promise) {
try {
await promise
} catch (error) {
if (error.name === 'NotAllowedError') {
this.error = 'ERROR: you need to grant camera access permission'
} else if (error.name === 'NotFoundError') {
this.error = 'ERROR: no camera on this device'
} else if (error.name === 'NotSupportedError') {
this.error = 'ERROR: secure context required (HTTPS, localhost)'
} else if (error.name === 'NotReadableError') {
this.error = 'ERROR: is the camera already in use?'
} else if (error.name === 'OverconstrainedError') {
this.error = 'ERROR: installed cameras are not suitable'
} else if (error.name === 'StreamApiNotSupportedError') {
this.error = 'ERROR: Stream API is not supported in this browser'
} else if (error.name === 'InsecureContextError') {
this.error =
'ERROR: Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.'
} else {
this.error = `ERROR: Camera error (${error.name})`
}
}
},
onDecode(result) {
this.result = result
},

最后

以上就是留胡子紫菜为你收集整理的原生Vue实现二维码扫一扫，兼容PC、安卓、IOS原生Vue实现二维码扫一扫vue-qrcode-reader使用步骤的全部内容，希望文章能够帮你解决原生Vue实现二维码扫一扫，兼容PC、安卓、IOS原生Vue实现二维码扫一扫vue-qrcode-reader使用步骤所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。