@mathewparet/vue-qr-reader
A VueJS compoenent (Modal) that integrates with @mathewparet/instascan to read qr code.
Last updated 2 months ago by mathewparet .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @mathewparet/vue-qr-reader 
SYNC missed versions from official npm registry.

@mathewparet/vue-qr-reader

A VueJS compoenent (Modal) that integrates with @mathewparet/instascan to read qr code.

Installation

npm install @mathewparet/vue-qr-reader

Global Import

import QrReader from '@mathewparet/vue-qr-reader';
Vue.use(QrReader);

Import in local scope

import QrReader from '@mathewparet/vue-qr-reader';
export default {
    components: {
        QrReader
    }
}

Attributes

Name Type Required Default Description
scan-period Number No 5 The frame rate at which QR has to be captured
title String No 'Read QR Code' Title of the QR Reader Modal window

Usage

<template>
    <qr-reader title="Scan Code" ref="reader" @scan="scanned"/>
    <a class="btn btn-secondaru" @click="scan">Scan</a>
</template>
<script>
    export default {
        methods: {
            scanned(data)
            {
                console.log(data); // has the scanned raw data
                this.$refs.reader.hide(); // hide the reader so no more QRs are scanned
            },
            scan()
            {
                this.$refs.reader.show();
            }
        }
    }
</script>

Events

scan

This event is called when a QR is read.

cameraNotFound

This event is called if no camera is detected.

error

This event is called for any error that occurs.

Current Tags

  • 1.0.2                                ...           latest (2 months ago)

2 Versions

  • 1.0.2                                ...           2 months ago
  • 1.0.1                                ...           3 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 2
Last Month 25
Dependencies (3)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |