el-dialog拖动

el-dialog 是 Element UI 中的一个组件，它提供了一个弹窗对话框的功能。要实现 el-dialog 的拖动功能，可以通过以下步骤实现：

1. 在 el-dialog 组件上添加 draggable 属性，将其值设置为 true，以启用拖动功能。
2. 使用 CSS 来自定义拖动句柄。可以给 el-dialog 的头部添加一个自定义 class，并使用这个 class 来设置拖动句柄的样式。
3. 使用 JavaScript 来实现拖动功能。在 el-dialog 的 mounted 钩子函数中，使用原生的 JavaScript 代码来实现拖动逻辑。

下面是一个示例代码：

<template>
  <el-dialog
    title="Dialog"
    :draggable="true"
    :visible.sync="dialogVisible"
    :before-close="beforeClose"
    custom-class="custom-dialog"
  >
    <span>Dialog Content</span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  mounted() {
    const dialogHeader = this.$el.querySelector('.custom-dialog .el-dialog__header');
    dialogHeader.style.cursor = 'move';

    let offsetX = 0;
    let offsetY = 0;
    let dragging = false;

    dialogHeader.addEventListener('mousedown', (event) => {
      offsetX = event.clientX - this.$el.offsetLeft;
      offsetY = event.clientY - this.$el.offsetTop;
      dragging = true;
    });

    document.addEventListener('mousemove', (event) => {
      if (dragging) {
        const left = event.clientX - offsetX;
        const top = event.clientY - offsetY;
        this.$el.style.left = `${left}px`;
        this.$el.style.top = `${top}px`;
      }
    });

    document.addEventListener('mouseup', () => {
      dragging = false;
    });
  },
  methods: {
    beforeClose(done) {
      this.dialogVisible = false;
      done();
    },
  },
};
</script>

这个示例代码中，我们在 el-dialog 组件上添加了 draggable 属性，设置为 true。然后使用 custom-class 自定义了一个 class 名称，并为 el-dialog 的头部添加了这个 class。通过 JavaScript 和 CSS 来实现拖动的功能。