0.0.7 • Published 1 year ago
vue3-images-dragger v0.0.7
Vue Images Dragger
with this simple component you can upload Images or Drag Images
Features
- Simple to use
- choose images
- drag & drop images
Installation
Install Vue Images Dragger with npm
npm i vue3-images-dragger
Setup
Import Images Dragger in main.ts
import DraggerPlugin from 'vue3-images-dragger';
import 'vue3-images-dragger/styles.css';
app.use(DraggerPlugin)
Use as component
import {ImagesDragger} from 'vue3-images-dragger';
import 'vue3-images-dragger/styles.css';
Usage
<script setup lang="ts">
import { ref } from 'vue';
const images = ref()
function getImages(data: any){
images.value = data;
}
const previewImage = (img: Blob) => {
return URL.createObjectURL(img)
}
</script>
<template>
<images-dragger @getImages="getImages"/>
<div v-for="(img, i) in images" :key="i">
<img :src="previewImage(img)" alt="">
</div>
</template>
Props
You can pass a custom class as a props to design the component according to your needs
<images-dragger @getImages="test" customClass="custom-class"/>
css
custom-class {
background-color: red !important;
border: 2px solid yellow !important;
font-size: 1.5rem;
}
you can target font, background, width, height, border