使用vue3+ElementUIPlus实现一个可以使用鼠标拖拽移动el-dialog窗口的功能有哪些实现方法帮我一一列举出来并给出每个示例

实现方法：

1. 使用自定义指令

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

3. 使用拖拽事件监听

示例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>

示例2：直接在el-dialog组件中添加draggable属性

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

示例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>