网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是gruhn的vue-qrcode-reader的升级版,基于Vue.js 3来解码/解析应用程序中的二维码。
1.导入并注册QR解码器。
// globally
import { createApp } from 'vue';
import App from './App.vue'
import QrReader from 'vue3-qr-reader';
const app = createApp(App);
app.use(QrReader);
app.mount('#app')
// Locally
import { QrStream, QrCapture, QrDropzone } from 'vue3-qr-reader';
export default {
components: {
QrStream,
QrCapture,
QrDropzone
},
};
2. 创建一个文件上传字段以扫描您选择的所有文件。
<qr-capture @decode="onDecode" class="mb"></qr-capture>
<div class="result">
Result: {{data}}
</div>
export default defineComponent({
name: 'QrCaptureExample',
components: {
QrCapture
},
setup() {
const state = reactive({
data: null
})
function onDecode(data) {
state.data = data
}
return {
...toRefs(state),
onDecode
}
}
});
3. 访问设备相机并连续扫描传入的帧。
<div class="stream">
<qr-stream @decode="onDecode" class="mb">
<div style="color: red;" class="frame"></div>
</qr-stream>
</div>
<div class="result">
Result: {{data}}
</div>
export default defineComponent({
name: 'QrStreamExample',
components: {
QrStream
},
setup() {
const state = reactive({
data: null
})
function onDecode(data) {
state.data = data
}
return {
...toRefs(state),
onDecode
}
}
});
4. 创建一个拖放区域以扫描所有放置的文件。
<qr-dropzone class="dropzone mb" @decode="onDecode">
Drop image here.
</qr-dropzone>
<div class="result">
Result: {{data}}
</div>
export default defineComponent({
name: 'QrDropzoneExample',
components: {
QrDropzone
},
setup() {
const state = reactive({
data: null
})
function onDecode(data) {
state.data = data
}
return {
...toRefs(state),
onDecode
}
}
});
转载请注明来源:vue3二维码解码组件(vue3-qr-reader)
本文永久链接地址:https://www.moyouyouw.cn/code/1183.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论