perf: 增加拖拽文件进入态

src/views/material-center/components/raw-material/components/add-raw-material-drawer/index.vue

@@ -36,11 +36,33 @@ export default defineComponent({
     const uploadData = ref([]);
     const tagData = ref([]);
     const modalRef = ref(null);
+    const isDragOver = ref(false);
 
     const uploadSuccessNum = computed(() => {
       return uploadData.value.filter((item) => item.uploadStatus === EnumUploadStatus.done).length;
     });
 
+    // 添加拖拽事件处理函数
+    const handleDragEnter = (e) => {
+      e.preventDefault();
+      isDragOver.value = true;
+    };
+
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      isDragOver.value = true;
+    };
+
+    const handleDragLeave = (e) => {
+      e.preventDefault();
+      isDragOver.value = false;
+    };
+
+    const handleDrop = (e) => {
+      e.preventDefault();
+      isDragOver.value = false;
+    };
+
     const getTagData = async () => {
       const { code, data } = await getRawMaterialTagsList();
       if (code === 200) {
@@ -137,6 +159,7 @@ export default defineComponent({
       modalRef.value?.destroy();
       modalRef.value = null;
       submitLoading.value = false;
+      isDragOver.value = false;
     };
 
     const handleUpload = async (option) => {
@@ -473,7 +496,15 @@ export default defineComponent({
               accept={[...imageExtensions, ...videoExtensions, ...documentExtensions].join(',')}
               showUploadList={false}
             >
-              <div class="upload-box rounded-8px cursor-pointer h-100px w-full border border-dashed border-#D7D7D9 flex flex-col items-center justify-center w-full">
+              <div
+                class={`upload-box rounded-8px cursor-pointer h-100px w-full border border-dashed border-#D7D7D9 flex flex-col items-center justify-center w-full ${
+                  isDragOver.value ? 'bg-#F0EDFF' : 'bg-#F7F8FA'
+                }`}
+                onDragenter={handleDragEnter}
+                onDragover={handleDragOver}
+                onDragleave={handleDragLeave}
+                onDrop={handleDrop}
+              >
                 <icon-plus size="14" class="mb-10px color-#55585F" />
                 <span class="cts">点击或拖拽文件到此处上传</span>
               </div>