Componente ImageInput para VueJS

Instalación

CDN

<script src="https://unpkg.com/@jysperu/vuejs-imageinput@latest/dist/imageinput.umd.js"></script>

NPM

npm i @jysperu/vuejs-imageinput

Uso

Import

import imageinput from "@jysperu/vuejs-imageinput";

Require

const imageinput = require("@jysperu/vuejs-imageinput");

Browser

const { ImageInput } = JCore.VueJS;

Ejemplo Básico

<template>
  <imageinput v-model="imagen" />
</template>

<script setup>
// Obtener el componente
import imageinput from "@jysperu/vuejs-imageinput";

// Variable que aloja la imágen
import { ref } from "vue";
const imagen = ref(null);
</script>

Ejemplo Avanzado

<template>
  <imageinput 
    v-model="imagen" 
    :circle="true" 
    :max-size="5" 
    :quality="0.9" 
    :disabled="false" 
    placeholder="Selecciona una foto de perfil"
    objeto="foto de perfil"
    accept=".jpg,.png,.webp"
    :alw-camera="true"
  />
</template>

<script setup>
import imageinput from "@jysperu/vuejs-imageinput";
import { ref } from "vue";

const imagen = ref("https://example.com/default-image.jpg");
</script>

Props

| Prop | Tipo | Default | Descripción | |------|------|---------|-------------| | id | String | "imageinput" | ID único del componente | | name | String | - | Nombre del campo para formularios | | required | Boolean | false | Si el campo es requerido | | modelValue | String | null | Valor del modelo (URL de la imagen) | | bgempty | String | URL de placeholder | Imagen de fondo cuando no hay imagen | | objeto | String | "imágen" | Nombre del objeto para textos (e.g., "foto", "imagen") | | accept | String | ".png, .jpg, .jpeg, .webp" | Tipos de archivo aceptados | | alw-camera | Boolean | true | Permitir tomar fotos con cámara | | circle | Boolean | false | Mostrar como círculo | | max-size | Number | 10 | Tamaño máximo en MB | | quality | Number | 0.8 | Calidad de compresión (0-1) | | disabled | Boolean | false | Deshabilitar el componente | | placeholder | String | "" | Texto alternativo para accesibilidad |

Eventos

| Evento | Descripción | |--------|-------------| | update:modelValue | Se emite cuando cambia el valor | | change | Se emite cuando cambia la imagen |

Dependencias

• Vue 3
• Bootstrap 5
• jQuery
• toastr
• JFile (para drag & drop)