ElementUI的Dialog弹窗实现拖拽移动功能

在ElementUI的Dialog组件中添加拖拽移动功能，可以使用第三方库如vuedraggable。以下是一个简单的实现示例：

首先，安装vuedraggable库：

npm install vuedraggable

然后，在你的组件中使用它：

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <div class="dialog-titlebar" v-draggable></div>
    <!-- 你的对话框内容 -->
  </el-dialog>
</template>
 
<script>
import Vue from 'vue'
import draggable from 'vuedraggable'
 
Vue.directive('draggable', {
  bind(el, binding, vnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    dialogHeaderEl.style.cursor = 'move'
 
    el.onmousedown = (e) => {
      // 鼠标点击位置距离对话框左上角的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop
 
      document.onmousemove = function (e) {
        // 移动时的坐标减去鼠标点击的位置的距离，得到对话框的新位置
        const left = e.clientX - disX
        const top = e.clientY - disY
 
        // 移动当前对话框
        binding.value.style.left = left + 'px'
        binding.value.style.top = top + 'px'
      }
 
      document.onmouseup = function (e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})
 
export default {
  components: {
    draggable
  },
  data() {
    return {
      dialogVisible: true
    }
  }
}
</script>
 
<style>
.dialog-titlebar {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
</style>

在这个示例中，我们创建了一个自定义指令draggable，它会给弹窗的标题栏添加拖拽事件。当用户点击并开始移动标题栏时，弹窗随之移动。这个实现依赖于ElementUI的样式类名，如.el-dialog__header，确保它们在你的ElementUI版本中是稳定的。