169 lines
3.8 KiB
Vue
169 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch, watchEffect, CSSProperties, computed } from 'vue';
|
|
import { useDraggable } from '@vueuse/core';
|
|
const emit = defineEmits(['update:visible', 'ok', 'cancel']);
|
|
/**于a-modal保持一致 */
|
|
const props = defineProps({
|
|
/**是否弹出显示，必传 */
|
|
visible: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
/**窗口标题 */
|
|
title: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
/**窗口宽度 */
|
|
width: {
|
|
type: [String, Number],
|
|
default: '520px',
|
|
},
|
|
bodyStyle: {
|
|
type: Object,
|
|
default: {},
|
|
},
|
|
keyboard: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
mask: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
maskClosable: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
maskStyle: {
|
|
type: Object,
|
|
default: {},
|
|
},
|
|
destroyOnClose: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
confirmLoading: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
footer: {
|
|
type: Object,
|
|
},
|
|
});
|
|
|
|
// 对标题进行监听
|
|
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
|
|
wrapClassName="draggable-modal"
|
|
:width="props.width"
|
|
:keyboard="props.keyboard"
|
|
:mask="props.mask"
|
|
:mask-closable="props.maskClosable"
|
|
:visible="props.visible"
|
|
:confirm-loading="props.confirmLoading"
|
|
:body-style="props.bodyStyle"
|
|
:mask-style="props.maskStyle"
|
|
:destroy-on-close="props.destroyOnClose"
|
|
:footer="props.footer"
|
|
@ok="(e:any) => emit('ok', e)"
|
|
@cancel="(e:any) => emit('cancel', e)"
|
|
>
|
|
<template #title>
|
|
<div
|
|
ref="modalTitleRef"
|
|
class="draggable-modal-title"
|
|
v-text="title"
|
|
></div>
|
|
</template>
|
|
<template #modalRender="{ originVNode }">
|
|
<div :style="transformStyle">
|
|
<component :is="originVNode" />
|
|
</div>
|
|
</template>
|
|
<slot></slot>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<style lang="less">
|
|
.draggable-modal {
|
|
// 穿透选择文字
|
|
// 给a-modal设置 get-container=".ant-pro-page-container"
|
|
// 防止跳转显示
|
|
// &.ant-modal-wrap {
|
|
// pointer-events: none;
|
|
// }
|
|
&-title {
|
|
width: 100%;
|
|
cursor: move;
|
|
}
|
|
}
|
|
</style>
|