Element-UI实现el-dialog弹框拖拽功能

在Element-UI中，el-dialog 组件本身不支持拖拽功能。但是，你可以使用第三方库，如vuedraggable，或者自己编写JavaScript代码来实现弹框拖拽功能。

以下是一个使用原生JavaScript实现弹框拖拽功能的示例：

<template>
  <el-dialog
    title="拖拽对话框"
    :visible.sync="dialogVisible"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
  >
    <div class="dialog-draggable" ref="draggable">
      拖动这里以移动对话框
    </div>
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      dialogVisible: true
    };
  },
  mounted() {
    this.$nextTick(() => {
      const draggableHeader = this.$refs.draggable;
      draggableHeader.onmousedown = (e) => {
        // 获取事件对象
        const clientX = e.clientX;
        const clientY = e.clientY;
        const dialog = this.$el.querySelector('.el-dialog');
        const dialogX = clientX - dialog.offsetLeft;
        const dialogY = clientY - dialog.offsetTop;
 
        document.onmousemove = (e) => {
          // 通过事件对象的clientX和clientY减去对话框距离视窗左边和上边的距离计算新的位置
          const left = e.clientX - dialogX;
          const top = e.clientY - dialogY;
          // 设置对话框的新位置
          dialog.style.left = `${left}px`;
          dialog.style.top = `${top}px`;
        };
 
        document.onmouseup = () => {
          // 鼠标松开时移除事件
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    });
  }
};
</script>
 
<style>
.dialog-draggable {
  cursor: move;
  user-select: none;
  padding: 20px;
  border: 1px solid #eee;
}
</style>

在这个示例中，我们为 .dialog-draggable 添加了一个鼠标按下事件处理器，当用户按下并开始拖动时，我们计算鼠标和对话框新位置的差值。然后，我们在文档上注册鼠标移动和鼠标释放事件处理器，以便在用户移动鼠标时更新对话框的位置，并在用户释放鼠标按钮时移除事件处理器。这样就实现了一个简单的弹框拖拽功能。