File tree Expand file tree Collapse file tree 2 files changed +43
-1
lines changed
Expand file tree Collapse file tree 2 files changed +43
-1
lines changed Original file line number Diff line number Diff line change 1+ # vue-use-dropzone
2+
3+ This is a vue implementation of [ ` react-dropzone ` ] ( https://github.com/react-dropzone/react-dropzone )
4+ [ Documentation] ( https://react-dropzone.js.org/ ) is more or less identical
5+ This was created as an experiment, if anyone is more interested in this library, feel free to contact me.
6+
7+ ``` shell
8+ npm install vue-use-dropzone
9+ ```
10+
11+ ### Example
12+
13+ ``` vue
14+ <template>
15+ <section>
16+ <div v-bind="getRootProps()">
17+ <input v-bind="getInputProps()" />
18+ <p>Drag 'n' drop some files here, or click to select files</p>
19+ </div>
20+ <ul>
21+ <li v-for="file in acceptedFiles" :key="file.path">
22+ {{ file.path }} - {{ file.size }} bytes
23+ </li>
24+ </ul>
25+ </section>
26+ </template>
27+
28+ <script lang="ts">
29+ import { defineComponent } from "vue-demi";
30+ import { useDropzone } from 'vue-use-dropzone';
31+
32+ export default defineComponent({
33+ setup() {
34+ const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
35+ return { acceptedFiles, getRootProps, getInputProps };
36+ },
37+ });
38+ </script>
39+
40+ ```
41+
42+
143# Vue 3 + Typescript + Vite
244
345This template should help get you started developing with Vue 3 and Typescript in Vite.
Original file line number Diff line number Diff line change 2424 "build" : " vue-tsc --noEmit && vite build" ,
2525 "serve" : " vite preview" ,
2626 "prepare" : " yarn build" ,
27- "release" : " np"
27+ "release" : " npx np"
2828 },
2929 "dependencies" : {
3030 "attr-accept" : " ^2.2.2" ,
You can’t perform that action at this time.
0 commit comments