vue+element实现dialog拖拽

Vue Element UI 提供了 el-dialog 组件，但是默认情况下不支持拖拽，需要自己进行实现。下面是实现 el-dialog 拖拽的步骤：

1. 在 el-dialog 的 title 区域添加一个拖拽的区域，可以使用 CSS 的 cursor 属性来设置鼠标样式。

<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 方法中记录鼠标按下的位置和对话框的位置。

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 事件中停止拖拽。

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);
  },
}

完整代码如下：

<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 元素的样式，如果使用了动画或者过渡效果，可能会有一些问题。