!453 feat(layer): 新增moveEnd/resizeEnd返回值

jevin98 · jevin98 · commit fb6ef96d7a93 · 2024-12-03T14:47:39.000+08:00
* feat(layer): 新增moveEnd/resizeEnd返回值
diff --git a/docs/src/document/zh-CN/components/layer.md b/docs/src/document/zh-CN/components/layer.md
@@ -776,12 +776,37 @@ const revert = () => {
 
 <template>
   <lay-button @click="openCallback" type="primary">打开</lay-button>
+  <lay-button @click="openMoveEnd" type="primary">moveEnd设置最终位置</lay-button>
+  <lay-button @click="openResizeEnd" type="primary">resizeEnd设置最终宽高</lay-button>
 </template>
 
 <script setup>
 import { ref, watch } from "vue";
 import { layer } from "@layui/layui-vue"
 
+const openMoveEnd = () => {
+    layer.open({
+        title:"移动结束",
+        content:"移动结束最终位置固定为top50px/left50px",
+        moveEnd(id, { left, top, isMin, isMax }) {
+            console.log(left, top, isMin, isMax, "left, top, isMin, isMax");
+            return ["50px", "50px"];
+        },
+    })
+}
+
+const openResizeEnd = () => {
+    layer.open({
+        title:"缩放结束",
+        content:"缩放结束最终宽高固定为top500px/left500px",
+        resize: true,
+        resizeEnd(id, { width, height }) {
+            console.log(width, height, "width, height");
+            return ["500px", "500px"];
+        },
+    })
+}
+
 const openCallback = () => {
     layer.open({
         title:"标题",
@@ -959,10 +984,10 @@ const openCallback = () => {
 | _yes_          | 点击底部默认按钮(不会主动关闭 `layer` 需要手动关闭，可用于一些逻辑判断)         | `function` | `id`     |        |     
 | _move-start_   | 弹窗拖动位置开始回调                                                       | `function` | `id`              | -      |
 | _moving_       | 弹窗拖动位置回调                                                           | `function` | `id`              | -      |
-| _move-end_     | 弹窗拖动位置结束回调                                                       | `function` | `id`              | -      |
+| _move-end_     | 弹窗拖动位置结束回调（支持返回最终left/top值）                                | [MoveEndFn](https://www.layui-vue.com/zh-CN/components/layer#types) | `() => undefined`              | -      |
 | _resize-start_ | 弹窗拉伸位置开始回调                                                       | `function` | `id`              | -      |
 | _resizing_     | 弹窗拉伸位置开始回调                                                       | `function` | `id`              | -      |
-| _resize-end_   | 弹窗拉伸位置开始回调                                                       | `function` | `id`              | -      |
+| _resize-end_   | 弹窗拉伸位置开始回调（支持返回最终width/height值）                                | [ResizeEndFn](https://www.layui-vue.com/zh-CN/components/layer#types) | `() => undefined`              | -      |
 
 :::
 
@@ -1318,4 +1343,29 @@ type ImgListType = {
 };
 
 type PropsContentType = VNodeTypes | (() => VNodeTypes);
+
+type OperateEndReturn = void | [string, string] | undefined;
+
+interface MoveEndFnOptions {
+  left: string;
+  top: string;
+  isMax: boolean;
+  isMin: boolean;
+}
+
+type MoveEndFn = (
+  id: string,
+  options: MoveEndFnOptions
+) => OperateEndReturn;
+
+interface ResizeEndFnOptions {
+  width: string;
+  height: string;
+}
+
+type ResizeEndFn = (
+  id: string,
+  options: ResizeEndFnOptions
+) => OperateEndReturn;
+
 ```
diff --git a/packages/layer/src/component/index.vue b/packages/layer/src/component/index.vue
@@ -1,5 +1,11 @@
 <script lang="ts" setup>
-import type { BtnType, ImgListType, PropsContentType } from "../types";
+import type {
+  BtnType,
+  ImgListType,
+  PropsContentType,
+  MoveEndFn,
+  ResizeEndFn,
+} from "../types";
 
 import Shade from "./Shade.vue";
 import Iframe from "./Iframe.vue";
@@ -118,10 +124,10 @@ export interface LayerProps {
   revert?: Function;
   moveStart?: Function;
   moving?: Function;
-  moveEnd?: Function;
+  moveEnd?: MoveEndFn;
   resizeStart?: Function;
   resizing?: Function;
-  resizeEnd?: Function;
+  resizeEnd?: ResizeEndFn;
   internalDestroy?: Function;
 }
 
@@ -171,10 +177,10 @@ const props = withDefaults(defineProps<LayerProps>(), {
   revert: () => {},
   moveStart: () => {},
   moving: () => {},
-  moveEnd: () => {},
+  moveEnd: () => undefined,
   resizeStart: () => {},
   resizing: () => {},
-  resizeEnd: () => {},
+  resizeEnd: () => undefined,
 });
 
 const emit = defineEmits(["close", "update:modelValue"]);
@@ -440,14 +446,25 @@ const supportMove = function () {
               _l.value = left;
               _t.value = top;
             }
-            props.moving(id.value, { top: top, left: left });
+            props.moving(id.value, { top, left });
           },
           () => {
             // 拖拽结束
-            props.moveEnd(id.value);
+            const options = {
+              left: l.value,
+              top: t.value,
+              isMin: min.value,
+              isMax: max.value,
+            };
+            const [left, top] = props.moveEnd(id.value, options) || [];
+
+            if (top && left) {
+              l.value = left;
+              t.value = top;
+            }
           },
+          // 拖拽开始
           () => {
-            // 拖拽开始
             props.moveStart(id.value);
           }
         );
@@ -462,8 +479,17 @@ const supportMove = function () {
             props.resizing(id.value, { width: width, height: height });
           },
           () => {
+            const options = {
+              width: w.value,
+              height: h.value,
+            };
             // 拉伸结束
-            props.resizeEnd(id.value);
+            const [width, height] = props.resizeEnd(id.value, options) || [];
+
+            if (width && height) {
+              w.value = width;
+              h.value = height;
+            }
           },
           () => {
             // 拉伸开始
diff --git a/packages/layer/src/types/index.ts b/packages/layer/src/types/index.ts
@@ -20,3 +20,27 @@ export type ImgListType = {
 };
 
 export type PropsContentType = VNodeTypes | (() => VNodeTypes);
+
+type OperateEndReturn = void | [string, string] | undefined;
+
+interface MoveEndFnOptions {
+  left: string;
+  top: string;
+  isMax: boolean;
+  isMin: boolean;
+}
+
+export type MoveEndFn = (
+  id: string,
+  options: MoveEndFnOptions
+) => OperateEndReturn;
+
+interface ResizeEndFnOptions {
+  width: string;
+  height: string;
+}
+
+export type ResizeEndFn = (
+  id: string,
+  options: ResizeEndFnOptions
+) => OperateEndReturn;
