vue-qrcode

VueQrcode

🤳 A Vue component for QR code generation with qrcode

TOC

• Demo
• Usage
• Available Props
• Available Events
• Sponsors
• Backers
• Changelog
• License

Demo

Usage

<template>
  <vue-qrcode
    value="https://www.1stg.me"
    @change="onDataUrlChange"
  />
</template>
<script>
import VueQrcode from 'vue-qrcode'

export default {
  data() {
    return {
      dataUrl: null,
    }
  },
  components: {
    VueQrcode,
  },
  methods: {
    onDataUrlChange(dataUrl) {
      this.dataUrl = dataUrl
    },
  },
}
</script>

Available Props

prop	type (range)	default value
version	number (1-40)	N/A
errorCorrectionLevel	String ('low', 'medium', 'quartile', 'high', 'L', 'M', 'Q', 'H')	'M'
maskPattern	number (0-7)	N/A
toSJISFunc	Function	N/A
margin	number	4
scale	number	4
width	number	N/A
color	{ dark: string; light:string }	{ dark: '#000000ff', light: '#ffffffff' }
type	string ('image/png', 'image/jpeg', 'image/webp')	'image/png'
quality	number(0-1)	0.92
value	string |Array<{ data: string; mode?: string }>	N/A

Available Events

event	type
change	dataUrl: string

Sponsors

1stG	RxTS	UnTS

Backers

1stG	RxTS	UnTS

Changelog

Detailed changes for each release are documented in CHANGELOG.md.

License

MIT © JounQin@1stG.me