directives: {// v-dialogDrag: 弹窗拖拽+水平方向伸缩dialogDrag: {bind(el, binding, vnode, oldVnode) {let _this = this;//弹框可拉伸最小宽高let dialogTables = null;let minWidth = 820;let minHeight = 420;//初始非全屏let isFullScreen = false;//当前宽高let nowWidth = 0;let nowHight = 0;//当前顶部高度let nowMarginTop = 0;//获取弹框头部(这部分可双击全屏)const dialogHeaderEl = el.querySelector('.el-dialog__header .header-title-drag');//弹窗const dragDom = el.querySelector('.el-dialog');//获取当前dialog idconst dialogID = el.id;//给弹窗加上overflow auto;不然缩小时框内的标签可能超出dialog;dragDom.style.overflow = "hidden";//清除选择头部文字效果//dialogHeaderEl.onselectstart = new Function("return false");//头部加上可拖动cursordialogHeaderEl.style.cursor = 'move';dialogHeaderEl.style.cssText += ';cursor:move;';dragDom.style.cssText += ';top:0px;';// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);const sty = (function() {if (window.document.currentStyle) {return (dom, attr) => dom.currentStyle[attr];} else {return (dom, attr) => getComputedStyle(dom, null)[attr];}})();//拖拽边界优化let moveDown = (e) => {// 鼠标按下,计算当前元素距离可视区的距离const disX = e.clientX - dialogHeaderEl.offsetLeft;const disY = e.clientY - dialogHeaderEl.offsetTop;const screenWidth = document.body.clientWidth; // body当前宽度const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度,可某些环境下无法获取)const dragDomWidth = dragDom.offsetWidth; // 对话框宽度const dragDomheight = dragDom.offsetHeight; // 对话框高度const minDragDomLeft = dragDom.offsetLeft;const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;const minDragDomTop = dragDom.offsetTop;const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;// 获取到的值带px 正则匹配替换let styL = sty(dragDom, 'left');let styT = sty(dragDom, 'top');// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为pxif (styL.includes('%')) {// eslint-disable-next-line no-useless-escapestyL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100);// eslint-disable-next-line no-useless-escapestyT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100);} else {styL = +styL.replace(/\px/g, '');styT = +styT.replace(/\px/g, '');}document.onmousemove = function (e) {// 通过事件委托,计算移动的距离let left = e.clientX - disX;let top = e.clientY - disY;// 边界处理if (-left > minDragDomLeft) {left = -minDragDomLeft;} else if (left > maxDragDomLeft) {left = maxDragDomLeft;}if (-top > minDragDomTop) {top = -minDragDomTop;} else if (top > maxDragDomTop) {top = maxDragDomTop;}// 移动当前元素dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;};document.onmouseup = function(e) {document.onmousemove = null;document.onmouseup = null;};return false;};dialogHeaderEl.onmousedown = moveDown;//双击头部全屏效果dialogHeaderEl.ondblclick = (e) => {if (isFullScreen == false) {nowHight = dragDom.clientHeight;nowWidth = dragDom.clientWidth;nowMarginTop = dragDom.style.marginTop;dragDom.style.left = 0;dragDom.style.top = 0;dragDom.style.height = "100VH";dragDom.style.width = "100VW";dragDom.style.marginTop = 0;isFullScreen = true;dialogHeaderEl.style.cursor = 'initial';dialogHeaderEl.onmousedown = null;} else {dragDom.style.height = "auto";dragDom.style.width = nowWidth + 'px';dragDom.style.marginTop = nowMarginTop;isFullScreen = false;dialogHeaderEl.style.cursor = 'move';dialogHeaderEl.onmousedown = moveDown;}}dragDom.onmousemove = function (e) {let moveE = e;if (e.clientX > dragDom.offsetLeft + dragDom.clientWidth - 10 || dragDom.offsetLeft + 10 > e.clientX) {dragDom.style.cursor = 'w-resize';} else if (el.scrollTop + e.clientY > dragDom.offsetTop + dragDom.clientHeight - 10) {dragDom.style.cursor = 's-resize';} else {dragDom.style.cursor = 'default';dragDom.onmousedown = null;}dragDom.onmousedown = (e) => {const clientX = e.clientX;const clientY = e.clientY;let elW = dragDom.clientWidth;let elH = dragDom.clientHeight;let EloffsetLeft = dragDom.offsetLeft;let EloffsetTop = dragDom.offsetTop;// dragDom.style.userSelect = 'none';let ELscrollTop = el.scrollTop;//判断点击的位置是不是为头部if (clientX > EloffsetLeft && clientX < EloffsetLeft + elW && clientY > EloffsetTop && clientY < EloffsetTop + 100) {//如果是头部在此就不做任何动作,以上有绑定dialogHeaderEl.onmousedown = moveDown;}else{document.onmousemove = function (e) {// e.preventDefault(); // 移动时禁用默认事件//左侧鼠标拖拽位置if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {//往左拖拽if (clientX > e.clientX) {dragDom.style.width = elW + (clientX - e.clientX) * 2 + 'px';}//往右拖拽if (clientX < e.clientX) {if(dragDom.clientWidth < minWidth){}else{dragDom.style.width = elW - (e.clientX - clientX) * 2 + 'px';}}}//右侧鼠标拖拽位置if (clientX > EloffsetLeft + elW - 10 && clientX < EloffsetLeft + elW) {//往左拖拽if (clientX > e.clientX) {if (dragDom.clientWidth < minWidth) {} else {dragDom.style.width = elW - (clientX - e.clientX) * 2 + 'px';}}//往右拖拽if (clientX < e.clientX) {dragDom.style.width = elW + (e.clientX - clientX) * 2 + 'px';}}//底部鼠标拖拽位置if (ELscrollTop + clientY > EloffsetTop + elH - 20 && ELscrollTop + clientY < EloffsetTop + elH) {if(dialogID =="dialog-detail"){dialogTables = document.getElementById('childTable')}if(dialogID =="dialog-error-detail"){dialogTables = document.getElementById('childErrorTable')}if(dialogID =="dialog-bill-detail"){dialogTables = document.getElementById('childBillTable')}// 往上拖拽if (clientY > e.clientY) {if (dragDom.clientHeight < minHeight) {} else {dragDom.style.height = elH - (clientY - e.clientY) * 2 + 'px';let  changeHeightSize = elH - (clientY - e.clientY) * 2;// dialogTables.style.height = (changeHeightSize - 109 - 25 - 32)*0.1522 + 'vh'dialogTables.style.height = (changeHeightSize - 84 - 25) + 'px'}}//往下拖拽if (clientY < e.clientY) {dragDom.style.height = elH + (e.clientY - clientY) * 2 + 'px';let  changeHeightSize = elH - (clientY - e.clientY) * 2;// dialogTables.style.height = (changeHeightSize - 109 - 25 - 32)*0.1522 + 'vh'dialogTables.style.height = (changeHeightSize - 84 - 25) + 'px'}}};//拉伸结束document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};}}}}}},

注意:使用方式

把上述新建插件放入vue文件中,然后将v-dialogDrag放入<el-dialog v-dialogDrag></el-dialog>标签

element技巧之element的dialog弹出框可拖拽、可拉伸、可全屏并处理边界问题相关推荐

  1. html弹出窗口怎么居中显示,HTML页面弹出居中可拖拽的自定义窗口层

    使用DIV弹出窗口来动态显示内容的原理:首先采用CSS和HTML隐藏弹窗中的内容,然后利用JavaScript(本教程中是JQuery)来动态显示它们.这种效果不仅能够充分利用有限的版面空间,而且能够 ...

  2. easyui js解析字符串_EasyUI Dialog弹出框+JS执行字符串

    虽然写得不是很全面,但这是项目中经常用到的 Dialog弹出框 Div标签 Dialog内容 iconCls:图标 closed:默认关闭 modal:模态框 JS代码 function openDi ...

  3. 安防互联网摄像头海康大华硬盘录像机视频流媒体服务器EasyNVR在layer弹出层中使用video标签无法最大化全屏播放问题解决

    诞生背景 众所周知,EasyNVR可以将局域网/广域网上的海康/大华等网络摄像头由rtsp转换为rtmp.rtsp.hls.flv协议转换,并提供推流服务,可以将拉到的网络摄像头直接转发到流媒体服务器 ...

  4. js实现弹出窗口的拖拽功能

    弹出窗口的拖拽 拖拽功能运用到的有 onmousedown 事件,onmousemove 事件以及 onmouseup 事件 弹出窗口基本步骤: 1.点击点击弹出窗口按钮弹出窗口: 2.窗口弹出后,鼠 ...

  5. 使用easeui dialog弹出框中使用CKeditor多次加载后无法编辑问题

    问题呈现:弹出框页面 <tr class="addtr"><th>内容</th><td><!-- <textarea r ...

  6. dialog 弹出框,遮罩层覆盖内容

    写完项目没太注意,并且情况是偶尔发生,点击dialog 的弹出框的时候,灰色遮罩层会覆盖内容上面, 这样的话可能是由于我们会发现浏览器遮罩层高于盒子遮罩层,会照成这样的问题,也有可能是我们给父元素加了 ...

  7. art.dialog弹出框后再根据其内部iframe的大小调整大小

    1.主页面,用来弹出弹出页面 //查看错误小练习$.exerciseClick = function(rowId ){$.event.get().preventDefault();var tdScor ...

  8. 2022-03-26 原生js实现一个点击弹出的可拖拽登录框(待编辑)

    点击,弹出登录框 登录会员 关闭 用户名: 登录密码: 登录会员 // 获取元素 var link = document.getElementById('link'); //点击的文字 var bg ...

  9. android制作弹出框样式,Android Dialog 弹出框 自定义 样式

    可以去除系统的Dialog的黑边,而且Dialog的样式和布局完全一样 可以是不规则图形 这个功能不是太难 ,不多说直接上代码 先是根据系统的Theme创建一个自己的Theme 在R.styles.x ...

  10. easyUI中dialog弹出框中数据加载不出来

    在前端使用easyUI开发的过程中遇到一个奇怪的问题,easyUI中的dialog中的combobox数据有时加载不出来,或者是一些文字也有时加载不出来,后来发现,dialog每次关闭并不会销毁原di ...

最新文章

  1. java byte 循环左移 循环右移 rotateLeft rotateRight
  2. 学生信息管理C语言 密码,求学生信息管理系统C语言版
  3. sql join教程
  4. Document for the hackthon
  5. Android 线程 thread 两种实现方法!
  6. 部署Chart应用并使用.net core读取Kubernetes中的configMap
  7. python12-并发编程
  8. 轻量级ORM框架Dapper应用二:使用Dapper实现CURD操作
  9. MySQL中文参考手册--8.MySQL教程--8.3 常用查询的例子
  10. Hadoop集群部署模型纵览3
  11. Perl语言程序设计_输入与输出
  12. 程序员情人节防止割韭菜
  13. c语言 编程显示图案*,C语言中怎么编程在计算机屏幕上显示如下图案?
  14. android 自动语音,在Android上自动下载离线语音识别语言
  15. 中文编程软件 习佳佳 1.82 版 介绍
  16. 5G学习笔记:承载网
  17. TJU【第二课堂】编程之美课程作业1
  18. # python 报错; pip install 报错;error: Microsoft Visual C++ 14.0 or greater is required. Get it with “Mi
  19. 一文彻底搞定布隆过滤器
  20. 三菱PLC 状态继电器

热门文章

  1. 如果要做 Rietveld 分析,XRD时步长需要满足什么要求
  2. 不等缓和曲线计算公式及坐标?
  3. 嵌入式课程 之 陀螺仪传感器实验
  4. 电脑卸载了bandzip,但是在文件的打开方式里面还是有bandzip,注册表里又搜不到相关文件,如何解决?
  5. win10 网络发现 打开保存后,自动关闭
  6. (10.1.4)拟物设计
  7. warning:discards qualifiers from pointer target type解决办法
  8. win10 shift+右键打开cmd
  9. linux修改dns教程,修改Centos的DNS地址
  10. ai怎么做盒子效果图_AI教程:打造一个逼真的包装盒