From 5bec71cd0bea7e0a7788baa702cb30ad43c12f13 Mon Sep 17 00:00:00 2001
From: Rhh-Z <106086215+Rhh-Z@users.noreply.github.com>
Date: Fri, 26 Jan 2024 16:59:39 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=9B=BE=E7=89=87=E8=A3=81=E5=89=AA?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=BB=98=E8=AE=A4=E5=8F=AF=E9=80=9A=E8=BF=87?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E8=A3=81=E5=89=AA=E5=8C=BA=E5=9F=9F=E5=85=B3?=
 =?UTF-8?q?=E9=97=AD=E5=8F=B3=E9=94=AE=E5=BC=B9=E5=87=BA=E7=9A=84=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E8=8F=9C=E5=8D=95=20(#894)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 为图片裁剪组件添加裁剪区域能够关闭右键菜单的功能
---
 src/components/ReCropper/src/index.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/ReCropper/src/index.tsx b/src/components/ReCropper/src/index.tsx
index 385bc93dc..ba3a5d4ae 100644
--- a/src/components/ReCropper/src/index.tsx
+++ b/src/components/ReCropper/src/index.tsx
@@ -2,6 +2,7 @@ import "./circled.css";
 import Cropper from "cropperjs";
 import { ElUpload } from "element-plus";
 import type { CSSProperties } from "vue";
+import { useEventListener } from "@vueuse/core";
 import { longpress } from "@/directives/longpress";
 import { useTippy, directive as tippy } from "vue-tippy";
 import {
@@ -66,6 +67,8 @@ const props = {
   src: { type: String, required: true },
   alt: { type: String },
   circled: { type: Boolean, default: false },
+  /** 是否可以通过点击裁剪区域关闭右键弹出的功能菜单，默认 `true` */
+  isClose: { type: Boolean, default: true },
   realTimePreview: { type: Boolean, default: true },
   height: { type: [String, Number], default: "360px" },
   crossorigin: {
@@ -83,10 +86,12 @@ export default defineComponent({
     const tippyElRef = ref<ElRef<HTMLImageElement>>();
     const imgElRef = ref<ElRef<HTMLImageElement>>();
     const cropper = ref<Nullable<Cropper>>();
+    const inCircled = ref(props.circled);
+    const isInClose = ref(props.isClose);
+    const inSrc = ref(props.src);
     const isReady = ref(false);
     const imgBase64 = ref();
-    const inCircled = ref(props.circled);
-    const inSrc = ref(props.src);
+
     let scaleX = 1;
     let scaleY = 1;
 
@@ -218,6 +223,7 @@ export default defineComponent({
       if (event === "scaleX") {
         scaleX = arg = scaleX === -1 ? 1 : -1;
       }
+
       if (event === "scaleY") {
         scaleY = arg = scaleY === -1 ? 1 : -1;
       }
@@ -375,7 +381,7 @@ export default defineComponent({
     function onContextmenu(event) {
       event.preventDefault();
 
-      const { show, setProps } = useTippy(tippyElRef, {
+      const { show, setProps, destroy, state } = useTippy(tippyElRef, {
         content: menuContent,
         arrow: false,
         theme: "light",
@@ -399,6 +405,11 @@ export default defineComponent({
       });
 
       show();
+
+      if (isInClose.value) {
+        if (!state.value.isShown && !state.value.isVisible) return;
+        useEventListener(tippyElRef, "click", destroy);
+      }
     }
 
     return {