Si necesitamos generar códigos QR, lo haremos desde el frontend, y utilizaremos el paquete qrcode.vue.
Para instalarlo, habrá que ejecutar (salvo que ya esté incluido en el proyecto del portal):
npm i qrcode.vue
Para utilizarlo, lo haremos como cualquier otro componente, importándolo y usándolo.
Import:
import QrCode from 'qrcode.vue';
export default {
...
components: {
...
QrCode,
}
}
Template:
<QrCode value="Hola mundo" />
El componente tiene las siguientes propiedades:
| Prop | Tipo | Valor por defecto | Descripción |
|---|---|---|---|
| value | string | '' | (Requerido) El texto que contiene el código QR. |
| size | number | 100 | Tamaño en píxeles. |
| render-as | string('canvas' | 'svg') | 'canvas' | Generar qr como canvas o svg. |
| margin | number | 0 | Margen |
| level | string('L' | 'M' | 'Q' | 'H') | 'H' | Nivel de corrección de error* |
| background | string | '#ffffff' | Color del fondo |
| foreground | string | '#000000' | Color de lo que no es el fondo |
*Corrección de error: se utiliza un algoritmo para que se genere un código QR que sea robusto a errores, es decir, que si parte de él no se ve correctamente se pueda leer igualmente, y lo hace metiendo más información en el QR. Esto significa que cuanto mayor sea el nivel de corrección de error, más denso será el código QR, lo que lo hará más legible, pero puede que necesite tener un tamaño mayor para que se pueda leer fácilmente. Los niveles de corrección de error son L (hasta 7% de imagen dañada o no legible), M (hasta 15%), Q (hasta 25%) o H (hasta 30%).