在vue3中给element-plus的el-dialog增加拖拽功能

拖拽演示
https://www.zhihu.com/zvideo/1380450791975731200

Step1 建立一个js文件

const dialogDrag = (app) => {
	app.directive('dialogdrag', {
    	// 渲染完毕
    	mounted(el) {
	      // 可视窗口的宽度
	      const clientWidth = document.documentElement.clientWidth
	      // 可视窗口的高度
	      const clientHeight = document.documentElement.clientHeight
	      // 记录坐标
	      let domset = {
	        x: clientWidth / 4, // 默认width 50%
	        y: clientHeight * 15 / 100  // 根据 15vh 计算
	      }
	
	      // 弹窗的容器
	      const domDrag = el.firstElementChild.firstElementChild
	      // 重新设置上、左距离
	      domDrag.style.marginTop = domset.y + 'px'
	      domDrag.style.marginLeft = domset.x + 'px'
	
	      // 记录拖拽开始的光标坐标，0 表示没有拖拽
	      let start = { x: 0, y: 0 }
	      // 移动中记录偏移量
	      let move = { x: 0, y: 0 }

	      // 鼠标按下，开始拖拽
	      document.onmousedown = (e) => {
	        // 判断对话框是否重新打开
	        if (domDrag.style.marginTop === '15vh') {
	          // 重新打开，设置 domset.y  top
	          domset.y = clientHeight * 15 / 100
	        }
	        start.x = e.clientX
	        start.y = e.clientY
	        domDrag.style.cursor = 'move' // 改变光标形状
	      }

	      // 鼠标移动，实时跟踪
	      document.onmousemove = (e) => {
	        if (start.x === 0) { // 不是拖拽状态
	          return
	        }
	        move.x = e.clientX - start.x
	        move.y = e.clientY - start.y
	
	        // 初始位置 + 拖拽距离
	        domDrag.style.marginLeft = ( domset.x + move.x )  + 'px'
	        domDrag.style.marginTop = ( domset.y + move.y )  + 'px'
	      }
	      // 鼠标抬起，结束拖拽
	      document.onmouseup = (e) => {
	        move.x = e.clientX - start.x
	        move.y = e.clientY - start.y
	
	        // 记录新坐标，作为下次拖拽的初始位置
	        domset.x += move.x
	        domset.y += move.y
	        domDrag.style.cursor = '' // 恢复光标形状
	        domDrag.style.marginLeft = domset.x + 'px'
	        domDrag.style.marginTop = domset.y + 'px'
	        // 结束拖拽
	        start.x = 0
	      }
    	}
  	})
  }
export default dialogDrag

Step2 在 main.js 里面挂载

import dialogDrag from '@/data/dialogDrag.js' // 地址就是dialogDrag.js在位置
const app = createApp(App)
app.use(dialogDrag)

Step3 在.vue文件中使用

<template>
  <!-- 注意：在el-dialog标签外包裹一个div标签后，使用v-dialogdrag即可调用该自定义插件，
  不要直接在el-dialog上调用，否则将无法生效 -->
  <div v-dialogdrag>
    <el-dialog 
    	:title="dialogStandbySample.title" 
    	v-model="dialogStandbySample.visible" 
    	center 
    	:close-on-click-modal="false">
		...
    </el-dialog>
  </div>
</template>

出处:https://www.cnblogs.com/jyk/p/14807244.html