文山网站开发,交换友情链接的网站标准是什么,八戒logo设计网,前端网站做中 英文通过自定义指令实现拖拽功能
在main.js里加入drag自定义指令
我自己测试时发现modal不管如何设置宽度#xff0c;居中等#xff0c;他的初始的left都为0#xff0c;如果不设置好#xff0c;容易出现点击后刚开始移动弹窗会偏移一段距离。
Vue.directive(drag, {bind(el)…通过自定义指令实现拖拽功能
在main.js里加入drag自定义指令
我自己测试时发现modal不管如何设置宽度居中等他的初始的left都为0如果不设置好容易出现点击后刚开始移动弹窗会偏移一段距离。
Vue.directive(drag, {bind(el) {// 获取弹窗头部const header el.querySelector(.ant-modal-header)const modal el.querySelector(.ant-modal)// 弹窗头部鼠标变为移动header.style.cursor move// 头部鼠标按下header.onmousedown er {// 得到初始位置// 初始位置left是0top是modal的offsetTopconst xx modal.style.left ? parseInt(modal.style.left.slice(0, -2)) : 0const yy modal.style.top ? parseInt(modal.style.top.slice(0, -2)) : modal.offsetTopconst disX er.clientX - xxconst disY er.clientY - yydocument.onmousemove e {//距离 为 移动的位置-初始位置const left e.clientX - disXconst top e.clientY - disY// 设置整个弹窗的距左距右位置modal.style.left left pxmodal.style.top top px}document.onmouseup () {document.onmousemove nulldocument.onmouseup null}}}
}) 在modal使用了centered时会出现移动的一瞬间弹窗偏移严重的问题而且弹窗上下居中的class名字在这里拿不到所以只能再建一个dragcenter自定义指令。
// 自定义代码实现弹窗拖动效果 modal居中时
Vue.directive(dragcenter, {bind(el) {// ant-modal-centered在这里取不到// const centered el.querySelector(ant-modal-centered)// console.log(centered, centered)// 获取弹窗头部const header el.querySelector(.ant-modal-header)const modal el.querySelector(.ant-modal)// 弹窗头部鼠标变为移动header.style.cursor move// 头部鼠标按下header.onmousedown er {// 得到初始位置// 居中的话 初始位置为0或已经移动过的位置const disX modal.style.left ? parseInt(modal.style.left.slice(0, -2)) : 0const disY modal.style.top ? parseInt(modal.style.top.slice(0, -2)) : 0document.onmousemove e {//距离 为 移动的位置-初始位置const left disX e.clientX - er.clientXconst top disY e.clientY - er.clientY// 设置整个弹窗的距左距右位置modal.style.left left pxmodal.style.top top px}document.onmouseup () {document.onmousemove nulldocument.onmouseup null}}}
})使用时modal未使用centered则用v-drag使用centered时则用v-dragcenter。
