|
@@ -10,19 +10,17 @@
|
|
class="tw-flex tw-place-content-between tw-items-center"
|
|
class="tw-flex tw-place-content-between tw-items-center"
|
|
>
|
|
>
|
|
<div
|
|
<div
|
|
- class="
|
|
|
|
- tw-text-base
|
|
|
|
- tw-ml-5
|
|
|
|
- tw-my-2
|
|
|
|
- tw-cursor-move
|
|
|
|
- tw-flex-grow
|
|
|
|
- tw-font-bold
|
|
|
|
- "
|
|
|
|
|
|
+ class="tw-text-base tw-ml-5 tw-my-2 tw-cursor-move tw-flex-grow tw-font-bold"
|
|
@mousedown="handleDragMouseDown"
|
|
@mousedown="handleDragMouseDown"
|
|
>
|
|
>
|
|
{{ title }}
|
|
{{ title }}
|
|
</div>
|
|
</div>
|
|
- <a-button shape="circle" size="small" @click="$emit('close')">
|
|
|
|
|
|
+ <a-button
|
|
|
|
+ shape="circle"
|
|
|
|
+ size="small"
|
|
|
|
+ class="tw-mr-2"
|
|
|
|
+ @click="$emit('close')"
|
|
|
|
+ >
|
|
<template #icon><CloseOutlined /></template>
|
|
<template #icon><CloseOutlined /></template>
|
|
</a-button>
|
|
</a-button>
|
|
</header>
|
|
</header>
|
|
@@ -33,7 +31,7 @@
|
|
|
|
|
|
<div
|
|
<div
|
|
ref="resizeHandler"
|
|
ref="resizeHandler"
|
|
- class="resize-handler"
|
|
|
|
|
|
+ :class="enableResize && 'resize-handler'"
|
|
@mousedown="handleResizeMouseDown"
|
|
@mousedown="handleResizeMouseDown"
|
|
></div>
|
|
></div>
|
|
</div>
|
|
</div>
|
|
@@ -47,13 +45,14 @@ import { store } from "@/store/store";
|
|
|
|
|
|
// 因为要更改props取得的值,所以不需要reactivity
|
|
// 因为要更改props取得的值,所以不需要reactivity
|
|
// eslint-disable-next-line vue/no-setup-props-destructure
|
|
// eslint-disable-next-line vue/no-setup-props-destructure
|
|
-const { top, width, height, title, zIndex } = withDefaults(
|
|
|
|
|
|
+const { top, width, height, title, zIndex, enableResize } = withDefaults(
|
|
defineProps<{
|
|
defineProps<{
|
|
title: string;
|
|
title: string;
|
|
top?: string;
|
|
top?: string;
|
|
width?: string;
|
|
width?: string;
|
|
height?: string;
|
|
height?: string;
|
|
zIndex?: number;
|
|
zIndex?: number;
|
|
|
|
+ enableResize?: boolean;
|
|
}>(),
|
|
}>(),
|
|
{
|
|
{
|
|
title: "无标题",
|
|
title: "无标题",
|
|
@@ -61,6 +60,7 @@ const { top, width, height, title, zIndex } = withDefaults(
|
|
width: "30%",
|
|
width: "30%",
|
|
height: "30%",
|
|
height: "30%",
|
|
zIndex: 1020,
|
|
zIndex: 1020,
|
|
|
|
+ enableResize: true,
|
|
}
|
|
}
|
|
);
|
|
);
|
|
|
|
|
|
@@ -130,6 +130,7 @@ const handleDragMouseUp = () => {
|
|
};
|
|
};
|
|
|
|
|
|
const handleResizeMouseDown = (e: MouseEvent) => {
|
|
const handleResizeMouseDown = (e: MouseEvent) => {
|
|
|
|
+ if (!enableResize) return;
|
|
document.addEventListener("mousemove", handleResizeMouseMove);
|
|
document.addEventListener("mousemove", handleResizeMouseMove);
|
|
document.addEventListener("mouseup", handleResizeMouseUp);
|
|
document.addEventListener("mouseup", handleResizeMouseUp);
|
|
const { clientX, clientY } = e;
|
|
const { clientX, clientY } = e;
|