feat: 新增可拖拽modal框

2023-11-24 17:06:18 +08:00
parent 018196eb88
commit f3fc415338
6 changed files with 153 additions and 45 deletions
--- a/src/components/DraggableModal/index.vue
+++ b/src/components/DraggableModal/index.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { ref, watch, watchEffect, CSSProperties, computed } from 'vue';
+import { useDraggable } from '@vueuse/core';
+const emit = defineEmits(['update:visible', 'ok', 'cancel']);
+const props = defineProps({
+  /**是否弹出显示，必传 */
+  visible: {
+    type: Boolean,
+    required: true,
+  },
+  /**窗口标题 */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**窗口宽度 */
+  width: {
+    type: [String, Number],
+    default: '520px',
+  },
+  /**确认按钮加载 */
+  confirmLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// 对标题进行监听
+const modalTitleRef = ref<HTMLElement | null>(null);
+const { x, y, isDragging } = useDraggable(modalTitleRef);
+
+const startX = ref<number>(0);
+const startY = ref<number>(0);
+const startedDrag = ref(false);
+const transformX = ref(0);
+const transformY = ref(0);
+const preTransformX = ref(0);
+const preTransformY = ref(0);
+const dragRect = ref({ left: 0, right: 0, top: 0, bottom: 0 });
+
+watch([x, y], () => {
+  if (!startedDrag.value) {
+    startX.value = x.value;
+    startY.value = y.value;
+    const bodyRect = document.body.getBoundingClientRect();
+    const titleRectEl = modalTitleRef.value;
+    if (titleRectEl) {
+      const titleRect = titleRectEl.getBoundingClientRect();
+      dragRect.value.right = bodyRect.width - (titleRect.width + 24);
+      dragRect.value.bottom = bodyRect.height - (titleRect.height + 16);
+    }
+    preTransformX.value = transformX.value;
+    preTransformY.value = transformY.value;
+  }
+  startedDrag.value = true;
+});
+
+watchEffect(() => {
+  if (!isDragging.value) {
+    startedDrag.value = false;
+  }
+  if (startedDrag.value) {
+    const dragRectX = Math.min(
+      Math.max(dragRect.value.left + 24, x.value),
+      dragRect.value.right
+    );
+    transformX.value = preTransformX.value + dragRectX - startX.value;
+
+    const dragRectY = Math.min(
+      Math.max(dragRect.value.top + 16, y.value),
+      dragRect.value.bottom
+    );
+    transformY.value = preTransformY.value + dragRectY - startY.value;
+  }
+});
+
+// 位移
+const transformStyle = computed<CSSProperties>(() => {
+  return {
+    transform: `translate(${transformX.value}px, ${transformY.value}px)`,
+  };
+});
+
+/**监听是否显示，位置还原 */
+watch(
+  () => props.visible,
+  val => {
+    if (val) {
+      transformX.value = 0;
+      transformY.value = 0;
+    }
+  }
+);
+</script>
+
+<template>
+  <a-modal
+    :width="props.width"
+    :keyboard="false"
+    :mask-closable="false"
+    :visible="props.visible"
+    :confirm-loading="props.confirmLoading"
+    @ok="e => emit('ok', e)"
+    @cancel="e => emit('cancel', e)"
+  >
+    <template #title>
+      <div ref="modalTitleRef" class="draggable-title">
+        Draggable Modal {{ title }}
+      </div>
+    </template>
+    <template #modalRender="{ originVNode }">
+      <div :style="transformStyle">
+        <component :is="originVNode" />
+      </div>
+    </template>
+    <slot></slot>
+  </a-modal>
+</template>
+
+<style lang="less" scoped>
+.draggable-title {
+  width: 100%;
+  cursor: move;
+}
+</style>