首先是弹框,用html+css画出来,vue中控制显示隐藏v-show或v-if: <div v-if="visible"class="my_dialog"id="dialogbig"><divclass="my_dialog_box"id="my_dialog_box"v-drag><divclass="my_dialog_title">{{showTitle}}<spanclass="my_dialog_close"@click="cancel"></span></div><!--内容-->...
let nowHight = 0;//当前顶部高度let nowMarginTop = 0;//获取弹框头部(这部分可双击全屏)const dialogHeaderEl = el.querySelector('.el-dialog__header');//弹窗const dragDom = el.querySelector('.el-dialog');//给弹窗加上overflow auto;不然缩小时框内的标签可能超出dialog;dragDom.style.overflow...
let nowHight=0;//当前顶部高度let nowMarginTop =0;//获取弹框头部(这部分可双击全屏)constdialogHeaderEl = el.querySelector('.el-dialog__header');//弹窗constdragDom = el.querySelector('.el-dialog');//给弹窗加上overflow auto;不然缩小时框内的标签可能超出dialog;dragDom.style.overflow ="auto...
vue v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { inserted:function(el) { const dragDom = el.querySelector('.jsPropupLayerHead'); dragDom.style.cursor = 'move'; dragDom.onmousedown = (e) => { event.stopPropagation(); // 鼠标按下,计算当前元素距离可视区的距离 const disX = ...
querySelector('.el-dialog'); //给弹窗加上overflow auto;不然缩小时框内的标签可能超出dialog; dragDom. style.overflow = "auto"; //清除选择头部文字效果 //dialogHeaderEl.onselectstart = new Function("return false"); //头部加上可拖动cursor dialogHeaderEl.style.cursor = 'move'; ...
我们可以定义一个 dialogdrag,然后在 mounted 里面实现拖拽的功能。 3 分析element-plus 的 Dialog 对话框 想要实现拖拽功能,首先要了解 Dialog 对话框渲染出来的结构,然后才好针对性下手改造。通过分析可见如下结构: 对话框结构 简单的说,一个 div 里面放了三个 div,通过 margin(top、left) 来实现“居中”的效果...
}; document.onmouseup = function (e) { document.onmousemove = null; document.onmouseup = null; }; } } }) 创建完成dialogDrag文件后,直接在main.js引入即可 v-dialogDrag: 弹窗拖拽属性 (重点!!! 给模态框添加这个属性模态框就能拖拽了)
dragDom.style.top = `${t + styT}px` // 将此时的位置传出去 // binding.value({x:e.pageX,y:e.pageY}) } document.onmouseup = function(e) { document.onmousemove = null document.onmouseup = null } } } }) // v-dialogDragWidth: 弹窗宽度拖大 拖小 ...
1、准备:在准备一个vue组件(点击按钮弹出对话框):在vue组件中添加**v-dialogDrag**属性//自定义指令: v-dialogDrag//点击遮罩层关闭对话框: close-on-click-modal<el-dialog v-dialogDrag :close-on-click-modal="false" title="我是标题" :visible.sync="mipLightbox"></el-dialog> ...
// v-dialogDrag: 弹窗拖拽属性 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header');const dragDom = el.querySelector('.el-dialog');dialogHeaderEl.style.cssText += ';cursor:move;'dragDom.style.cssText += ...