vue中给dialog添加拖拽功能的步骤
- 在utils文件中新增directive.js文件
import Vue from 'vue'
// v-dialogDrag: 弹窗拖拽
Vue.directive('dialogDrag', {
bind(el, binding, vnode, oldVnode) {
const dragObj = el.querySelector('.el-dialog')
dragObj.style.cursor = 'move'
dragObj.onmousedown = (e) => {
// 重点,当el-dialog中的内部为图片时,拖拽异常的解决方法
if (e.stopPropagation) e.stopPropagation();
if (e.preventDefault) e.preventDefault();
e.cancelBubble = true;
e.returnValue = false;
// 鼠标按下,计算当前元素距离可视区的距离
const disX = e.clientX - dragObj.offsetLeft;
const disY = e.clientY - dragObj.offsetTop+150;
document.onmousemove = function(event) {
// 移动当前元素
dragObj.style.marginLeft = (event.clientX-disX)+"px"
dragObj.style.marginTop = (event.clientY-disY)+"px"
}
document.onmouseup = function(e) {
this.onmousedown = null
this.onmousemove = null
}
}
}
})
- 在main.js文件中新增代码
import './utils/directives.js'; //el-dialog拖拽
- 在需要使用拖拽功能的el-dialog标签中,添加v-dialogDrag
<el-dialog
title="图片预览"
:visible.sync="dialogVisible"
v-dialogDrag
>
<span class="dialogImg">
<img src="" alt="">
</span>
</el-dialog>