添加画布拖拽上传图片

src/component/Canvas/CanvasEditor/index.vue

@@ -127,6 +127,7 @@ const canvasRef = ref(null);
 const canvasContainerRef = shallowRef(null);
 const imageUploadRef = ref(null);
 const currentZoom = ref(100);
+const appContainerRef = ref(null);
 
 // 画布设置
 const canvasWidth = ref(props.config.width);
@@ -914,6 +915,32 @@ const cropImage = (url) => {
 };
 provide("cropImage", cropImage); // 提供给子组件使用
 
+// 处理画布容器的拖放事件
+const isDragOver = ref(false);
+const canvasDragover = (e) => {
+  e.preventDefault();
+  const types = e.dataTransfer.types;
+  isDragOver.value = types.includes("Files");
+};
+
+// 处理画布容器的拖离事件
+const canvasDragleave = (e) => {
+  e.preventDefault();
+  isDragOver.value = false;
+};
+
+// 处理画布容器的拖放事件
+const canvasDragdrop = (e) => {
+  e.preventDefault();
+  isDragOver.value = false;
+  const files = e.dataTransfer.files;
+  for (const file of files) {
+    if (file.type.startsWith("image/")) {
+      handleImageUpload({ target: { files: [file] } });
+    }
+  }
+};
+
 // 提供外部ref实例方法
 defineExpose({
   layers, // 图层数据
@@ -1104,7 +1131,13 @@ defineExpose({
 </script>
 
 <template>
-  <div class="app-container">
+  <div
+	ref="appContainerRef"
+    class="app-container"
+	@dragover.stop="canvasDragover"
+	@dragleave.stop="canvasDragleave"
+	@drop.stop="canvasDragdrop"
+  >
     <!-- 头部菜单组件 -->
     <div class="header-menu">
       <HeaderMenu
@@ -1293,6 +1326,8 @@ defineExpose({
       :api="Https.httpUrls.queryLibraryPage"
       isLibrary
     />
+	<!-- 上传图片遮罩 -->
+	<div v-show="isDragOver" class="dragover-tip"></div>
   </div>
 </template>
 
@@ -1325,6 +1360,21 @@ defineExpose({
     border-bottom: 1px solid #e0e0e0;
     background-color: #ffffff;
   }
+  >.dragover-tip{
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #fff;
+	font-size: 1.6rem;
+	z-index: 9999;
+	pointer-events: none;
+  }
 }
 
 .main-content {