Vue3+ElementUIPlus 实现可拖拽移动的 el-dialog 窗口：三种方法详解

使用 Vue3+ElementUIPlus 实现可拖拽移动的 el-dialog 窗口：三种方法详解

在使用 ElementUI Plus 开发 Vue3 项目时，有时需要实现 el-dialog 窗口的可拖拽移动功能，方便用户调整窗口位置。本文将介绍三种方法来实现该功能，并提供详细代码示例。

实现方法：

使用自定义指令

该方法通过自定义指令将拖拽逻辑绑定到 el-dialog 组件上。

示例1：使用自定义指令

在 main.js 中注册指令：

import Vue from 'vue'
import App from './App.vue'
import ElementUIPlus from 'element-ui-plus'
import 'element-ui-plus/lib/index.css'

Vue.use(ElementUIPlus)

Vue.directive('drag-dialog', {
  bind(el) {
    let oDiv = el.querySelector('.el-dialog')
    oDiv.onmousedown = (e) => {
      let disX = e.clientX - oDiv.offsetLeft
      let disY = e.clientY - oDiv.offsetTop

      document.onmousemove = (e) => {
        let l = e.clientX - disX
        let t = e.clientY - disY
        oDiv.style.left = l + 'px'
        oDiv.style.top = t + 'px'
      }

      document.onmouseup = (e) => {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

new Vue({
  render: h => h(App),
}).$mount('#app')

在组件中使用：

<template>
  <el-dialog v-drag-dialog :visible.sync='dialogVisible' title='Hello world'>
    <span>这是一段信息</span>
    <p>这是一段信息</p>
  </el-dialog>
</template>

直接在 el-dialog 组件中添加 draggable 属性

ElementUI Plus 的 el-dialog 组件本身提供 draggable 属性，可以直接添加该属性来实现拖拽功能。

示例2：直接在 el-dialog 组件中添加 draggable 属性
```
<template>
  <el-dialog :visible.sync='dialogVisible' title='Hello world' draggable>
    <span>这是一段信息</span>
    <p>这是一段信息</p>
  </el-dialog>
</template>
```

使用拖拽事件监听

该方法通过监听鼠标事件来实现拖拽功能，需要在组件中使用 ref 获取到 el-dialog 元素并添加事件监听器。

示例3：使用拖拽事件监听

<template>
  <el-dialog :visible.sync='dialogVisible' title='Hello world' ref='dialog'>
    <span>这是一段信息</span>
    <p>这是一段信息</p>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  mounted() {
    const dialog = this.$refs.dialog.$el.querySelector('.el-dialog')
    dialog.addEventListener('mousedown', this.handleMousedown)
  },
  beforeDestroy() {
    const dialog = this.$refs.dialog.$el.querySelector('.el-dialog')
    dialog.removeEventListener('mousedown', this.handleMousedown)
  },
  methods: {
    handleMousedown(e) {
      const dialog = this.$refs.dialog.$el.querySelector('.el-dialog')
      const disX = e.clientX - dialog.offsetLeft
      const disY = e.clientY - dialog.offsetTop
      const moveFn = (e) => {
        let l = e.clientX - disX
        let t = e.clientY - disY
        dialog.style.left = l + 'px'
        dialog.style.top = t + 'px'
      }
      document.addEventListener('mousemove', moveFn)
      document.addEventListener('mouseup', () => {
        document.removeEventListener('mousemove', moveFn)
      })
    }
  }
}
</script>

总结

本文介绍了三种实现 Vue3+ElementUIPlus 中 el-dialog 窗口拖拽移动功能的方法，你可以根据自己的需求选择合适的方法。

使用自定义指令，方便统一管理拖拽逻辑，可以灵活应用于不同组件。
使用 draggable 属性，简单易用，但可能无法满足所有定制化的需求。
使用事件监听，更加灵活，可以自定义拖拽行为，但代码量稍多。

希望本文能够帮助你实现 el-dialog 窗口的可拖拽移动功能。

Vue3+ElementUIPlus 实现可拖拽移动的 el-dialog 窗口：三种方法详解