six-dropzone
v0.3.4
Published
Nuxt.js 3 Dropzone
Downloads
192
Readme
Table of Content
Features
Demo
Setup
Installation
six-dropzone for Nuxt3 applications.
npx nuxi@latest module add six-dropzone
Config
nuxt.config.js
{
modules: [
'six-dropzone',
]
},
Usage
<script setup>
const photo = ref()
const drop = (e) => {
console.log(e.dataTransfer.files[0], 'drop')
}
const selectedFile = (e) => {
console.log(e, 'change')
};
const modelValue = (e) => {
console.log(e, 'model-value')
}
</script>
<template>
<SixDropzone
v-model="photo"
@drop.prevent="drop"
@change="selectedFile"
@update:model-value="modelValue"
:drop-mounted="url"
></SixDropzone>
</template>
API
Props
| Name | Type | Default Value | Description |
|------------------|-------------------|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| dropMounted
| String
| undefined
| The image URL. |
| label
| String
| Select File
| Sets the button text |
| error-messages
| String/String[]
| []
| Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation. |
Events
| Name | Type | Description |
|---------------------|-----------|-----------------------------------------------------------|
| drop
| [File]
| drop value of the component. |
| change
| [File]
| value of the component. |
| update:modelValue
| [File]
| Event that is emitted when the component’s model changes. |
Slots
| Name | Description |
|-----------|-----------------------|
| Default
| The default Vue slot. |