Vue Element UI 提供了 el-
dialog 组件，但是默认情况下不支持拖拽，需要自己进行实现。下面是实现 el-
dialog 拖拽的步骤：
1. 在 el-
dialog 的 title 区域添加一个拖拽的区域，可以使用 CSS 的 cursor 属性来设置鼠标样式。
```html
<template>
<el-
dialog :visible.sync="
dialogVisible" title="可拖拽的对话框">
<div class="
dialog-header" @mousedown="startDrag">
<span>可拖拽的对话框</span>
</div>
<div>
<!-- 对话框内容 -->
</div>
</el-
dialog>
</template>
<style>
.
dialog-header {
cursor: move;
}
</style>
```
2. 在 startDrag 方法中记录鼠标按下的位置和对话框的位置。
```js
export default {
data() {
return {
dialogVisible: false,
dragging: false, // 是否正在拖拽
dragX: 0, // 鼠标按下时的位置
dragY: 0,
dialogLeft: 0, // 对话框的位置
dialogTop: 0,
};
},
methods: {
startDrag(e) {
this.dragging = true;
this.dragX = e.clientX;
this.dragY = e.clientY;
this.
dialogLeft = this.$refs.
dialog.getBoundingClientRect().left;
this.
dialogTop = this.$refs.
dialog.getBoundingClientRect().top;
},
},
};
```
3. 在监听 document 的 mousemove 和 mouseup 事件，在 mousemove 事件中计算出对话框应该移动到的位置，在 mouseup 事件中停止拖拽。
```js
methods: {
startDrag(e) {
// ...
document.addEventListener('mousemove', this.drag);
document.addEventListener('mouseup', this.stopDrag);
},
drag(e) {
if (this.dragging) {
const offsetX = e.clientX - this.dragX;
const offsetY = e.clientY - this.dragY;
this.$refs.
dialog.style.left = `${this.
dialogLeft + offsetX}px`;
this.$refs.
dialog.style.top = `${this.
dialogTop + offsetY}px`;
}
},
stopDrag() {
this.dragging = false;
document.removeEventListener('mousemove', this.drag);
document.removeEventListener('mouseup', this.stopDrag);
},
}
```
完整代码如下：
```html
<template>
<el-
dialog :visible.sync="
dialogVisible" title="可拖拽的对话框" ref="
dialog">
<div class="
dialog-header" @mousedown="startDrag">
<span>可拖拽的对话框</span>
</div>
<div>
<!-- 对话框内容 -->
</div>
</el-
dialog>
</template>
<style>
.
dialog-header {
cursor: move;
}
</style>
<script>
export default {
data() {
return {
dialogVisible: false,
dragging: false, // 是否正在拖拽
dragX: 0, // 鼠标按下时的位置
dragY: 0,
dialogLeft: 0, // 对话框的位置
dialogTop: 0,
};
},
methods: {
startDrag(e) {
this.dragging = true;
this.dragX = e.clientX;
this.dragY = e.clientY;
this.
dialogLeft = this.$refs.
dialog.getBoundingClientRect().left;
this.
dialogTop = this.$refs.
dialog.getBoundingClientRect().top;
document.addEventListener('mousemove', this.drag);
document.addEventListener('mouseup', this.stopDrag);
},
drag(e) {
if (this.dragging) {
const offsetX = e.clientX - this.dragX;
const offsetY = e.clientY - this.dragY;
this.$refs.
dialog.style.left = `${this.
dialogLeft + offsetX}px`;
this.$refs.
dialog.style.top = `${this.
dialogTop + offsetY}px`;
}
},
stopDrag() {
this.dragging = false;
document.removeEventListener('mousemove', this.drag);
document.removeEventListener('mouseup', this.stopDrag);
},
},
};
</script>
```
这样就实现了 el-
dialog 的拖拽功能。注意，由于拖拽是直接修改 DOM 元素的样式，如果使用了动画或者过渡效果，可能会有一些问题。
3811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
