twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-04 07:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 图片裁剪组件默认可通过点击裁剪区域关闭右键弹出的功能菜单 (#894)

Browse Source 
* feat: 为图片裁剪组件添加裁剪区域能够关闭右键菜单的功能
This commit is contained in:
Rhh-Z 2024-01-26 16:59:39 +08:00 committed by GitHub
parent b28a1df479
commit 5bec71cd0b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/ReCropper/src/index.tsx
View File

@ -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 {