CODE

El componente CODE renderiza códigos QR y códigos de barras 1D completamente del lado del cliente.

Propósito

CODE permite a los desarrolladores generar códigos visuales sin depender de APIs externas ni procesamiento server-side:

• Códigos QR para pagos, enlaces, autenticación, etc.
• Códigos de barras 1D (CODE_128, EAN_13, CODE_39) para productos, inventario, etc.

Propiedades

Propiedad	Tipo	Obligatorio	Valor predeterminado	Descripción
type	string	Sí	—	Debe ser CODE
name	string	Sí	—	Identificador del componente
format	string	Sí	—	Formato del código: QR_CODE, CODE_128, EAN_13, CODE_39
value	string	Sí	—	Contenido a codificar (URL, texto, número de producto, etc.)
size	number	No	200	Tamaño del código QR en píxeles (solo para QR_CODE)
width	number	No	2	Ancho de la barra más angosta en píxeles (solo para barcodes)
height	number	No	80	Alto del código de barras en píxeles (solo para barcodes)
showText	boolean	No	true	Muestra el texto debajo del código de barras (solo para barcodes)
cssClass	string	No	""	Clases CSS para el contenedor externo
cssStyle	string	No	""	Estilos CSS para el contenedor externo
visible	boolean	No	true	Indica si el componente es visible

Ejemplos

Código QR

- name: paymentQr
  type: CODE
  format: QR_CODE
  value: "https://example.com/pay/123"
  size: 240

Código de barras CODE_128

- name: productBarcode
  type: CODE
  format: CODE_128
  value: "ABC-123-XYZ"
  width: 320
  height: 90
  showText: true

Código de barras EAN_13

- name: eanBarcode
  type: CODE
  format: EAN_13
  value: "1234567890128"

Con variables

- name: dynamicQr
  type: CODE
  format: QR_CODE
  value: "{{payment_url}}"
  size: 240

Notas técnicas

• La renderización es 100% client-side usando @chenfengyuan/vue-qrcode (QR) y JsBarcode (barcodes en SVG).
• El componente reacciona automáticamente a cambios en value.
• Los códigos de barras se renderizan en formato SVG para escalado perfecto.
• No se realizan llamadas a endpoints backend ni se generan imágenes server-side.