JSPM

  • Created
  • Published
  • Downloads 198597
  • Score
    100M100P100Q159670F
  • License MIT

A Vue.js component to generate QRCode.

Package Exports

  • qrcode.vue

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (qrcode.vue) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

qrcode.vue

⚠️ Now when you are using Vue 3.x, please upgrade qrcode.vue to 3.x

🔒 if you are using Vue 2.x, please keep using version 1.x;

A Vue.js component to generate QRCode.

Build Status GitHub license

中文

install

the qrcode.vue component can use in you Vue.js app.

npm install --save qrcode.vue # yarn add qrcode.vue
dist/
|--- qrcode.vue.cjs.js         // CommonJS
|--- qrcode.vue.esm.js         // ES module
|--- qrcode.vue.browser.js     // UMD for browser or require.js or CommonJS
|--- qrcode.vue.browser.min.js // UMD Minimum size

Usage

e.g.

import { createApp } from 'vue'
import QrcodeVue from 'qrcode.vue'

createApp({
  data: {
    value: 'https://example.com',
  },
  template: '<qrcode-vue :value="value"></qrcode-vue>',
  components: {
    QrcodeVue,
  },
}).mount('#root')

Or single-file components with a *.vue extension:

<template>
  <qrcode-vue :value="value" :size="size" level="H" />
</template>
<script>
  import QrcodeVue from 'qrcode.vue'

  export default {
    data() {
      return {
        value: 'https://example.com',
        size: 300,
      }
    },
    components: {
      QrcodeVue,
    },
  }
</script>

Component props

value

  • Type: string
  • Default: ''

The value content of qrcode

level

  • Type: string
  • Default: H

qrcode Error correction level (one of 'L', 'M', 'Q', 'H'). Know more, wikipedia: QR_code

size

  • Type: number
  • Default: 100

The size of qrcode element.

margin

  • Type: number
  • Default: 0

Define how much wide the quiet zone should be.

renderAs

  • Type: string
  • Default: canvas

Generate QRcode as canvas or svg.

background

  • Type: string
  • Default: #ffffff

The background color of qrcode.

foreground

  • Type: string
  • Default: #000000

The foreground color of qrcode.

class

  • Type: string
  • Default: ''

The class name of qrcode element.

License

copyright © 2021 @scopewu, license by MIT