拖拽演示
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