按键删除

src/view/case/photos/canvas-photo-editor.js

@@ -80,6 +80,7 @@ export class CanvasPhotoEditor {
     this.indexingList = []//是否开启
     this.indexingLineList = []//绘制线条
     this.isLineDel = false//删除标引
+    this.clearIndexing = options.clearIndexing//清除父级标引状态
     // 图片缓存
     this.imgCache = new Map()
     // 操作缓存
@@ -196,6 +197,12 @@ export class CanvasPhotoEditor {
 
   // --- 核心：拖拽仅改坐标，不重绘 ---
   async handleMouseDown(e) {
+    if (e.button === 2 && this.tempArrow.drawing) { // 右键
+      //结束标引
+      this.clearIndexing()
+      e.preventDefault()
+      return
+    }
     if (e.target !== this.canvas) return
     // ==========================================
     // 🔥 页面拖拽排序：按下时记录
@@ -426,7 +433,7 @@ export class CanvasPhotoEditor {
     }
     console.log('indexing', this.indexing, PhotoIndex, isLine)
     if (PhotoIndex.itemIndex == -1) {
-      ElMessage.error("请选中对应的图片再进行标引操作！");
+      ElMessage.error("请选中对应的图片进行标引操作！");
       return
     }
 

src/view/case/photos/index.vue

@@ -171,7 +171,10 @@
             ref="canvas"
             class="canvas-content"
             @click="handleCanvasClick"
+            @contextmenu.prevent="handleContextMenu"
             @drop="handleDrop"
+            @keydown="handleKeyDown"
+            tabindex="0"
             @dragover="handleDragOver"
           ></canvas>
         </div>
@@ -266,7 +269,7 @@ const getImgList = async () => {
   }));
   let pageCentent = await getCasePhotoRollList(caseId.value);
   pageCentent.map((ele) => {
-    if (ele.content && ele.content != "[]") {
+    if (ele.content && ele.content != "[]" && ele.id != id) {
       let content = JSON.parse(ele.content);
       let listHiostry =
         content.pages?.flatMap((item) => item.list.filter((i) => i)) || [];
@@ -331,6 +334,7 @@ onMounted(() => {
         currentIndex.value = value.currentIndex;
         console.log("updata", value);
       },
+      clearIndexing: changeIndexing
     });
 
     // 绑定容器（用于居中计算）
@@ -502,7 +506,14 @@ const deleteSelectedPage = async () => {
     // selectedPageIndex.value = editor.value.selectedPageIndex;
   }
 };
+const handleKeyDown = (e) =>{
+  console.log("handleKeyDown", e)
 
+  if (e.key === 'Delete' || e.key === 'Backspace') {
+    e.preventDefault()
+    deleteSelectedPage()
+  }
+}
 // 重置缩放
 const resetZoom = () => {
   if (editor.value) {
@@ -570,6 +581,9 @@ const handleDrop = async (e) => {
 const exportToPDF = (paperType) => {
   exportCasePhotos({ showPagesRef: editor.value });
 };
+const handleContextMenu = (e) => {
+  e.preventDefault()
+}
 </script>
 <style lang="sass">
 @import "./style.scss"

src/view/case/photos/style.scss

@@ -1,5 +1,9 @@
 
 .phoneContent{
+  canvas:focus {
+  outline: none;
+  border: none;
+}
   .header{
     display: flex;
     justify-content: space-between;