|
@@ -0,0 +1,53 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import {nextTick, onMounted, ref} from "vue";
|
|
|
+
|
|
|
+const divRef = ref<HTMLDivElement>()
|
|
|
+
|
|
|
+const dragEnter = (e: Event) => {
|
|
|
+ console.log(e)
|
|
|
+ e.preventDefault()
|
|
|
+}
|
|
|
+
|
|
|
+const dragLeave = (e: Event) => {
|
|
|
+ e.preventDefault()
|
|
|
+}
|
|
|
+
|
|
|
+const dragOver = (e) => {
|
|
|
+ e.preventDefault()
|
|
|
+}
|
|
|
+
|
|
|
+const dropFile = (event) => {
|
|
|
+ event.preventDefault()
|
|
|
+ let files = [];
|
|
|
+
|
|
|
+ let fileList = event.dataTransfer.files;
|
|
|
+ let len = fileList.length;
|
|
|
+ for (let i = 0; i < len; i++) {
|
|
|
+ files[i] = fileList[i];
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(files)
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div ref="divRef" class="knowledge-base_box"
|
|
|
+ @dragenter="dragEnter"
|
|
|
+ @dragleave="dragLeave"
|
|
|
+ @dragover="dragOver"
|
|
|
+ @drop="dropFile"
|
|
|
+ draggable="true"
|
|
|
+ tabindex="0">
|
|
|
+ <input type="file" accept multiple webkitdirectory/>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.knowledge-base_box {
|
|
|
+ width: 420px;
|
|
|
+ height: 200px;
|
|
|
+ border: 1px solid;
|
|
|
+}
|
|
|
+</style>
|