使用vue3 + ElementUi 使得el-dialog 能够实现鼠标按下移动功能最好是使用指令操作注意：使用Vue3使用Vue3语法实现一下？

可以使用Vue3的自定义指令来实现el-dialog的鼠标按下移动功能。

首先，需要在main.js中注册自定义指令：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)
app.use(ElementPlus)

app.directive('drag-dialog', {
  mounted(el) {
    let dialogHeader = el.querySelector('.el-dialog__header')
    let dragDom = el.querySelector('.el-dialog')
    dialogHeader.style.cursor = 'move'
    dialogHeader.style.userSelect = 'none'
    let sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)

    dialogHeader.onmousedown = (e) => {
      let disX = e.clientX - dialogHeader.offsetLeft
      let disY = e.clientY - dialogHeader.offsetTop

      let screenWidth = document.body.clientWidth // body当前宽度
      let screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度，但是有滚动条所以取documentElement高度)

      let dragDomWidth = dragDom.offsetWidth // 对话框宽度
      let dragDomheight = dragDom.offsetHeight // 对话框高度

      let minDragDomLeft = dragDom.offsetLeft
      let maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth

      let minDragDomTop = dragDom.offsetTop
      let maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight

      // 获取到的值带px 正则匹配替换
      let styL, styT

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes('%')) {
        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
      } else {
        styL = +sty.left.replace(/\px/g, '')
        styT = +sty.top.replace(/\px/g, '')
      }

      document.onmousemove = function(e) {
        // 通过事件委托，计算移动的距离
        let left = e.clientX - disX
        let top = e.clientY - disY

        // 边界处理
        if (-left > minDragDomLeft) {
          left = -minDragDomLeft
        } else if (left > maxDragDomLeft) {
          left = maxDragDomLeft
        }

        if (-top > minDragDomTop) {
          top = -minDragDomTop
        } else if (top > maxDragDomTop) {
          top = maxDragDomTop
        }

        // 移动当前元素
        dragDom.style.left = `${left + styL}px`
        dragDom.style.top = `${top + styT}px`

        // 将此时的位置传出去
        // binding.value({x:e.pageX,y:e.pageY})
      }

      document.onmouseup = function() {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

app.mount('#app')

然后，在组件中使用指令：

<el-dialog
  v-drag-dialog
  title="提示"
  :visible.sync="dialogVisible"
  :before-close="handleClose"
>
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

这样，就可以实现el-dialog的鼠标按下移动功能了。