|
|
@@ -1,11 +1,85 @@
|
|
|
<template>
|
|
|
-
|
|
|
- <a-row></a-row>
|
|
|
-
|
|
|
+ <a-modal
|
|
|
+ :visible="true"
|
|
|
+ ref="modalRef"
|
|
|
+ :wrap-style="{ overflow: 'hidden' }"
|
|
|
+ >
|
|
|
+ <template #title>
|
|
|
+ <div ref="modalTitleRef" style="width: 100%; cursor: move">{{title}}</div>
|
|
|
+ </template>
|
|
|
+ <template #modalRender="{ originVNode }">
|
|
|
+ <div :style="transformStyle">
|
|
|
+ <component :is="originVNode" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </a-modal>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup >
|
|
|
+import { useDraggable } from '@vueuse/core'
|
|
|
+import { ref, watch, watchEffect, computed, CSSProperties } from 'vue'
|
|
|
+
|
|
|
+export interface ModalProPorps {
|
|
|
+ visible: boolean,
|
|
|
+ title: string
|
|
|
+}
|
|
|
+
|
|
|
+const emit = defineEmits(['close'])
|
|
|
+
|
|
|
+const props = defineProps<ModalProPorps>()
|
|
|
+
|
|
|
+// 拖拽相关的代码
|
|
|
+const modalTitleRef = ref()
|
|
|
+
|
|
|
+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 titleRect = modalTitleRef.value.getBoundingClientRect()
|
|
|
+ dragRect.value.right = bodyRect.width - titleRect.width
|
|
|
+ dragRect.value.bottom = bodyRect.height - titleRect.height
|
|
|
+ preTransformX.value = transformX.value
|
|
|
+ preTransformY.value = transformY.value
|
|
|
+ }
|
|
|
+ startedDrag.value = true
|
|
|
+})
|
|
|
+
|
|
|
+watch(isDragging, () => {
|
|
|
+ if (!isDragging) {
|
|
|
+ startedDrag.value = false
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+watchEffect(() => {
|
|
|
+ if (startedDrag.value) {
|
|
|
+ transformX.value =
|
|
|
+ preTransformX.value +
|
|
|
+ Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) -
|
|
|
+ startX.value
|
|
|
+ transformY.value =
|
|
|
+ preTransformY.value +
|
|
|
+ Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) -
|
|
|
+ startY.value
|
|
|
+ }
|
|
|
+})
|
|
|
|
|
|
+const transformStyle = computed<CSSProperties>(() => {
|
|
|
+ return {
|
|
|
+ transform: `translate(${transformX.value}px, ${transformY.value}px)`
|
|
|
+ }
|
|
|
+})
|
|
|
+// 拖拽相关的代码
|
|
|
</script>
|
|
|
|
|
|
<style>
|
lvkun996