xianer0405 / qrcode.vue

A Vue.js component for qrcode.

qrcode.vue

A Vue.js component for QRCode.

Language

中文简体

Start quick

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

npm install --save qrcode.vue # yarn add qrcode.vue

Usage

e.g.

import Vue from 'vue';
import QrcodeVue from 'qrcode.vue';

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

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

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

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

Component props

prop	type	default value	expain
value	String	''	qrcode value
className	String	''	qrcode element className
size	Number	100	qrcode element size
level	String	L	Error correction level ('L', 'M', 'Q', 'H')
background	String	#fff	qrcode background color
foreground	String	#000	qrcode color

Thanks

"qr.js" "qrcode.react"

License

copyright © 2017 scopewu, license by MIT