Vue2 实现 Dialog 弹框可拖拽：简单教程和代码示例

可以通过以下步骤实现 Vue2 中的 dialog 弹框可拖拽：

在 dialog 组件中添加一个 mousedown 事件，以便拖拽时能够获取鼠标的位置。
在 mousedown 事件中添加一个 mouseup 事件和 mousemove 事件，以便在鼠标移动时动态改变 dialog 的位置。
在 mousemove 事件中计算出 dialog 应该移动的位置，并将其应用到 dialog 的 style 属性中。
在 mouseup 事件中移除 mousemove 事件，以停止拖拽。

下面是一个简单的实现示例：

<template>
  <div class="dialog" :style="{ top: top + 'px', left: left + 'px' }">
    <div class="title" @mousedown="startDrag">{{ title }}</div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      top: 0,
      left: 0,
      dragging: false,
      startX: 0,
      startY: 0
    };
  },
  methods: {
    startDrag(e) {
      this.dragging = true;
      this.startX = e.clientX - this.left;
      this.startY = e.clientY - this.top;
      document.addEventListener('mouseup', this.stopDrag);
      document.addEventListener('mousemove', this.drag);
    },
    drag(e) {
      if (this.dragging) {
        this.left = e.clientX - this.startX;
        this.top = e.clientY - this.startY;
      }
    },
    stopDrag() {
      this.dragging = false;
      document.removeEventListener('mouseup', this.stopDrag);
      document.removeEventListener('mousemove', this.drag);
    }
  }
};
</script>

在上面的示例中，我们在 dialog 组件的 title 区域添加了一个 mousedown 事件，用于启动拖拽。在 mousedown 事件中，我们记录了鼠标的起始位置，并在 document 上添加了 mouseup 事件和 mousemove 事件，用于在拖拽时动态改变 dialog 的位置。

在 mousemove 事件中，我们计算出 dialog 应该移动的距离，并将其应用到 dialog 的 style 属性中。在 mouseup 事件中，我们移除了 mousemove 事件，以停止拖拽。

需要注意的是，我们在 data 中添加了 dragging、startX 和 startY 三个变量，并在拖拽开始时将 dragging 设置为 true，以便在 mousemove 事件中判断是否正在拖拽。我们还将 startX 和 startY 记录下来，以便在计算 dialog 应该移动的距离时使用。