VueQrcode
🤳 A Vue component for QR code generation with qrcode
TOC
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 | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | |
| 
| 
|