element技巧之element的dialog弹出框可拖拽、可拉伸、可全屏并处理边界问题
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弹出框可拖拽、可拉伸、可全屏并处理边界问题相关推荐
- html弹出窗口怎么居中显示,HTML页面弹出居中可拖拽的自定义窗口层
使用DIV弹出窗口来动态显示内容的原理:首先采用CSS和HTML隐藏弹窗中的内容,然后利用JavaScript(本教程中是JQuery)来动态显示它们.这种效果不仅能够充分利用有限的版面空间,而且能够 ...
- easyui js解析字符串_EasyUI Dialog弹出框+JS执行字符串
虽然写得不是很全面,但这是项目中经常用到的 Dialog弹出框 Div标签 Dialog内容 iconCls:图标 closed:默认关闭 modal:模态框 JS代码 function openDi ...
- 安防互联网摄像头海康大华硬盘录像机视频流媒体服务器EasyNVR在layer弹出层中使用video标签无法最大化全屏播放问题解决
诞生背景 众所周知,EasyNVR可以将局域网/广域网上的海康/大华等网络摄像头由rtsp转换为rtmp.rtsp.hls.flv协议转换,并提供推流服务,可以将拉到的网络摄像头直接转发到流媒体服务器 ...
- js实现弹出窗口的拖拽功能
弹出窗口的拖拽 拖拽功能运用到的有 onmousedown 事件,onmousemove 事件以及 onmouseup 事件 弹出窗口基本步骤: 1.点击点击弹出窗口按钮弹出窗口: 2.窗口弹出后,鼠 ...
- 使用easeui dialog弹出框中使用CKeditor多次加载后无法编辑问题
问题呈现:弹出框页面 <tr class="addtr"><th>内容</th><td><!-- <textarea r ...
- dialog 弹出框,遮罩层覆盖内容
写完项目没太注意,并且情况是偶尔发生,点击dialog 的弹出框的时候,灰色遮罩层会覆盖内容上面, 这样的话可能是由于我们会发现浏览器遮罩层高于盒子遮罩层,会照成这样的问题,也有可能是我们给父元素加了 ...
- art.dialog弹出框后再根据其内部iframe的大小调整大小
1.主页面,用来弹出弹出页面 //查看错误小练习$.exerciseClick = function(rowId ){$.event.get().preventDefault();var tdScor ...
- 2022-03-26 原生js实现一个点击弹出的可拖拽登录框(待编辑)
点击,弹出登录框 登录会员 关闭 用户名: 登录密码: 登录会员 // 获取元素 var link = document.getElementById('link'); //点击的文字 var bg ...
- android制作弹出框样式,Android Dialog 弹出框 自定义 样式
可以去除系统的Dialog的黑边,而且Dialog的样式和布局完全一样 可以是不规则图形 这个功能不是太难 ,不多说直接上代码 先是根据系统的Theme创建一个自己的Theme 在R.styles.x ...
- easyUI中dialog弹出框中数据加载不出来
在前端使用easyUI开发的过程中遇到一个奇怪的问题,easyUI中的dialog中的combobox数据有时加载不出来,或者是一些文字也有时加载不出来,后来发现,dialog每次关闭并不会销毁原di ...
最新文章
- java byte 循环左移 循环右移 rotateLeft rotateRight
- 学生信息管理C语言 密码,求学生信息管理系统C语言版
- sql join教程
- Document for the hackthon
- Android 线程 thread 两种实现方法!
- 部署Chart应用并使用.net core读取Kubernetes中的configMap
- python12-并发编程
- 轻量级ORM框架Dapper应用二:使用Dapper实现CURD操作
- MySQL中文参考手册--8.MySQL教程--8.3 常用查询的例子
- Hadoop集群部署模型纵览3
- Perl语言程序设计_输入与输出
- 程序员情人节防止割韭菜
- c语言 编程显示图案*,C语言中怎么编程在计算机屏幕上显示如下图案?
- android 自动语音,在Android上自动下载离线语音识别语言
- 中文编程软件 习佳佳 1.82 版 介绍
- 5G学习笔记:承载网
- TJU【第二课堂】编程之美课程作业1
- # python 报错; pip install 报错;error: Microsoft Visual C++ 14.0 or greater is required. Get it with “Mi
- 一文彻底搞定布隆过滤器
- 三菱PLC 状态继电器
热门文章
- 如果要做 Rietveld 分析,XRD时步长需要满足什么要求
- 不等缓和曲线计算公式及坐标?
- 嵌入式课程 之 陀螺仪传感器实验
- 电脑卸载了bandzip,但是在文件的打开方式里面还是有bandzip,注册表里又搜不到相关文件,如何解决?
- win10 网络发现 打开保存后,自动关闭
- (10.1.4)拟物设计
- warning:discards qualifiers from pointer target type解决办法
- win10 shift+右键打开cmd
- linux修改dns教程,修改Centos的DNS地址
- ai怎么做盒子效果图_AI教程:打造一个逼真的包装盒