组件拖拽
js
<template>
<div>
<el-dialog
v-model="dialogVisible"
@mousedown="startDrag"
width="30%"
ref="draggableDialog"
:style="dialogStyle"
title="Tips"
:before-close="handleClose"
>
<span>This is a message</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false"
>Confirm</el-button
>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted , computed} from 'vue';
const dialogVisible = ref(true);
const dialogRef = ref(null);
const dragging = ref(false);
const startX = ref(0);
const startY = ref(0);
const dialogX = ref(0);
const dialogY = ref(0);
const updateDialogPosition = () => {
if (dragging.value) {
const x = event.clientX - startX.value;
const y = event.clientY - startY.value;
// 这里可以添加边界检查
dialogX.value = x;
dialogY.value = y;
}
};
const dialogStyle = computed(() => ({
position: 'fixed', // 或者 'absolute',取决于你的布局需求
top: `${dialogY.value}px`,
left: `${dialogX.value}px`,
}));
const startDrag = (event) => {
dragging.value = true;
startX.value = event.clientX - dialogX.value;
startY.value = event.clientY - dialogY.value;
document.addEventListener('mousemove', updateDialogPosition);
document.addEventListener('mouseup', () => {
dragging.value = false;
document.removeEventListener('mousemove', updateDialogPosition);
});
};
onMounted(() => {
// 可以在这里获取对话框的初始位置,并设置到 dialogX 和 dialogY
// 但由于 Element Plus 的 dialog 默认是居中的,你可能需要一些额外的逻辑
// 来确定初始位置,或者让用户通过拖拽来定位
});
onUnmounted(() => {
// 清理事件监听器
document.removeEventListener('mousemove', updateDialogPosition);
});
</script>
<style scoped>
</style>
<template>
<div>
<el-dialog
v-model="dialogVisible"
@mousedown="startDrag"
width="30%"
ref="draggableDialog"
:style="dialogStyle"
title="Tips"
:before-close="handleClose"
>
<span>This is a message</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false"
>Confirm</el-button
>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted , computed} from 'vue';
const dialogVisible = ref(true);
const dialogRef = ref(null);
const dragging = ref(false);
const startX = ref(0);
const startY = ref(0);
const dialogX = ref(0);
const dialogY = ref(0);
const updateDialogPosition = () => {
if (dragging.value) {
const x = event.clientX - startX.value;
const y = event.clientY - startY.value;
// 这里可以添加边界检查
dialogX.value = x;
dialogY.value = y;
}
};
const dialogStyle = computed(() => ({
position: 'fixed', // 或者 'absolute',取决于你的布局需求
top: `${dialogY.value}px`,
left: `${dialogX.value}px`,
}));
const startDrag = (event) => {
dragging.value = true;
startX.value = event.clientX - dialogX.value;
startY.value = event.clientY - dialogY.value;
document.addEventListener('mousemove', updateDialogPosition);
document.addEventListener('mouseup', () => {
dragging.value = false;
document.removeEventListener('mousemove', updateDialogPosition);
});
};
onMounted(() => {
// 可以在这里获取对话框的初始位置,并设置到 dialogX 和 dialogY
// 但由于 Element Plus 的 dialog 默认是居中的,你可能需要一些额外的逻辑
// 来确定初始位置,或者让用户通过拖拽来定位
});
onUnmounted(() => {
// 清理事件监听器
document.removeEventListener('mousemove', updateDialogPosition);
});
</script>
<style scoped>
</style>