88 lines
1.6 KiB
JavaScript
88 lines
1.6 KiB
JavaScript
|
import QRCode from 'qrcode/build/qrcode';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'qrcode',
|
||
|
|
|
||
|
|
props: {
|
||
|
|
/**
|
||
|
|
* The value of the QR code.
|
||
|
|
*/
|
||
|
|
value: null,
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The options for the QR code generator.
|
||
|
|
* {@link https://github.com/soldair/node-qrcode#qr-code-options}
|
||
|
|
*/
|
||
|
|
options: Object,
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The tag name of the component's root element.
|
||
|
|
*/
|
||
|
|
tag: {
|
||
|
|
type: String,
|
||
|
|
default: 'canvas',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
render(createElement) {
|
||
|
|
return createElement(this.tag, this.$slots.default);
|
||
|
|
},
|
||
|
|
|
||
|
|
watch: {
|
||
|
|
$props: {
|
||
|
|
deep: true,
|
||
|
|
immediate: true,
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Update the QR code when props changed.
|
||
|
|
*/
|
||
|
|
handler() {
|
||
|
|
if (this.$el) {
|
||
|
|
this.generate();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
/**
|
||
|
|
* Generate QR code.
|
||
|
|
*/
|
||
|
|
generate() {
|
||
|
|
const { options, tag } = this;
|
||
|
|
const value = String(this.value);
|
||
|
|
|
||
|
|
if (tag === 'canvas') {
|
||
|
|
QRCode.toCanvas(this.$el, value, options, (error) => {
|
||
|
|
/* istanbul ignore if */
|
||
|
|
if (error) {
|
||
|
|
throw error;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else if (tag === 'img') {
|
||
|
|
QRCode.toDataURL(value, options, (error, url) => {
|
||
|
|
/* istanbul ignore if */
|
||
|
|
if (error) {
|
||
|
|
throw error;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.$el.src = url;
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
QRCode.toString(value, options, (error, string) => {
|
||
|
|
/* istanbul ignore if */
|
||
|
|
if (error) {
|
||
|
|
throw error;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.$el.innerHTML = string;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted() {
|
||
|
|
this.generate();
|
||
|
|
},
|
||
|
|
};
|