赞
踩
有需求才有动力
看 dialog 的样式,发现是已经进行了定位了,加个 top 和 left 就能对 dialog 的位置进行调整
.el-dialog {
position: relative;
margin: 0 auto 50px;
background: #fff;
border-radius: 2px;
box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
box-sizing: border-box;
width: 50%;
}
创建一个自定义指令,加个监听事件,在特定的区域监听鼠标的按下,移动,抬起,做不同的操作
// main.js // 注册一个自定义指令 -- 移动 Vue.directive('dialog-move',function(el,bingding){ // 获取需要移动的 dialog 盒子部分 let moveBox = el.firstElementChild // 获取盒子的 header 部分,该部分用做按下移动的功能区域 let moveElement = el.firstElementChild.firstElementChild // 鼠标按下事件 function mouseDown (e){ // 鼠标样式变化 el.style.cursor = 'move' // 记录鼠标位置减去盒子距离浏览器之后剩余的距离 let X = e.clientX - moveBox.offsetLeft let Y = e.clientY - moveBox.offsetTop function mouseMove(e){ // 取消自带的margin,避免对移动的影响 moveBox.style.margin = 'inherit' // 拖动 moveBox.style.top = e.clientY - Y + 'px' moveBox.style.left = e.clientX - X + 'px' } // 鼠标移动 document.addEventListener('mousemove',mouseMove) // 鼠标抬起 document.addEventListener('mouseup',()=>{ el.style.cursor = 'auto' // 取消监听鼠标移动 document.removeEventListener('mousemove',mouseMove) }) } // 创建鼠标按下监听事件 moveElement.addEventListener('mousedown',mouseDown) })
给 dialog 加上 v-dialog-move
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
v-dialog-move>
...
</el-dialog>
好了,加上自定义指令的盒子就可以拖动了
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。