elementUi el-dialog 对话框实现可拖拽、去掉覆盖层、并可操作底层的按钮

一、对话框实现可拖拽功能

实现方法：vue的指令
使用方法：

1、将下列drag.js文件放入代码库中；
2、在main.js中引入上述drag.js文件；

 import 'src/libs/drag.js';

3、在el-dialog组件中加上指令

<el-dialogv-dialogDrags:visible="dialogShow"
>
</el-dialog>

src/libs/drag.js

import Vue from 'vue';/**  使用方法：*  将以下代码复制到一个js文件中，然后在入口文件main.js中import引入即可；*  给elementUI的dialog上加上 v-dialogDrags*  给dialog设置 :close-on-click-modal="false" , 禁止点击遮罩层关闭弹出层*/// 兼容ie,谷歌
// v-dialogDrags: 弹窗拖拽属性 （重点！！！ 给模态框添加这个属性模态框就能拖拽了）
Vue.directive('dialogDrags', { // 属性名称dialogDrags，前面加v- 使用bind(el, binding, vnode, oldVnode) {const dialogHeaderEl = el.querySelector('.el-dialog__header');const dragDom = el.querySelector('.el-dialog');dialogHeaderEl.style.cssText += ';cursor:move;';// 获取原有属性 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, false)[attr];}})();dialogHeaderEl.onmousedown = (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; // 对话框高度// 获取到的值带px 正则匹配替换let styL = sty(dragDom, 'left');let styT = sty(dragDom, 'top');// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为pxif (styL.includes('%')) {styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100);styT = +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 + styL;let top = e.clientY - disY + styT;// 边界处理if (left < 0) {left = 0;}if (left > screenWidth - dragDomWidth) {left = screenWidth - dragDomWidth;}if (top < 0) {top = 0;}if (top > screenHeight - dragDomheight) {top = screenHeight - dragDomheight;}// 移动当前元素dragDom.style.cssText += `;left:${left}px;top:${top}px;`;};document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};};}
});

二、对话框去掉覆盖层可操作底层的按钮功能

1、首先使用elementUi自带的两个参数

参数	说明	默认值
modal	是否需要遮罩层	true
close-on-click-modal	是否可以通过点击 modal 关闭 Dialog	true

<el-dialogv-dialogDrags:visible="dialogShow":modal="false":close-on-click-modal="false"
>
</el-dialog>

这样操作后发现灰色的遮罩层确实去掉了，但是通过审查元素查看还是有一层透明的覆盖层的，而且这时候也无法点击底部的按钮；

2、使用css3属性 pointer-events

pointer-events:none
元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
简单的说就是点击事件可以穿透本元素，作用于下层的元素；

pointer-events:auto
与pointer-events属性未指定时的表现效果相同

// 覆盖层元素增加可穿透点击事件
.el-dialog__wrapperpointer-events:none;
// 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）
.el-dialogpointer-events:auto;

elementUi el-dialog 对话框实现可拖拽、去掉覆盖层、并可操作底层的按钮相关推荐

pygame鼠标进行拖拽移动图片、缩放、以及按钮响应案例
pygame鼠标进行拖拽移动图片.缩放.以及按钮响应案例 # -*- coding: UTF-8 -*- #!/usr/bin/env python3 # @Time : 2021.12 # @Au ...
element-ui dialog组件添加可拖拽位置可拖拽宽高
有几个点需要注意一下每个弹窗都要有唯一dom可操作指令可以做到拖拽时要添加可拖拽区块 header 由于element-ui dialog组件在设计时宽度用了百分比, 这里不同浏览器有兼容性问题 ...
JavaScript模态对话框类（拖拽时动画）
2010年写了一个模态对话框类,这次进行一些重构和扩充.拖拽时使其有动画效果.接口没变,如下 new ModelDialog({caption 标题 '对话框标题'(默认)template 主体内容 ...
element-ui el-dialog侧边弹窗可横向拖拽改变宽度
el-dialog侧边弹窗可横向拖拽改变宽度,并且存储到localStorage,刷新页面后依然是拖拽后的宽度 Vue.directive('dialogDrag', {inserted: funct ...
去除 element-ui 中 Dialog 对话框遮罩层的方法
在使用element-ui的Dialog时,默认会有遮罩层,想要去除遮罩层,官方文档给出了 modal 属性: modal 是一个布尔值,表示是否需要遮罩层: 然而,将 modal 赋值为 false ...
element-ui的 Dialog 对话框添加背景图片
el-dialog的默认背景为白色 ,我们将其设置为透明.并添加背景图片.el-dialog__header.el-dialog__body.el-dialog__footer背景设置为透明,即可. ...
JQuery Dialog(JS模态窗口,可拖拽的DIV)
JQuery Dialog(JS模态窗口,可拖拽的DIV) 吴剑 2012-08-08 原创文章,转载必需注明出处:http://www.cnblogs.com/wu-jian/ 效果图调用示意图 ...
qstandarditemmodel 重写data函数后无法实现拖拽_实现类似百度网盘上传的功能
今天写到了上传文件部分,记录一下. 前端使用了dropzone.js(用于实现文件上传的JS库),并对此文件进行了细微修改. 说一下思路吧: 首先界面长这样: 点击上传文件,需要弹出一个对话框,对话框 ...
bootstrap拖动div_BootStrap modal实现拖拽功能
bootstrap中有javascript插件modal也就是对话框,加入拖拽功能,具体内容如下在使用modal时首选需要引用js // 完成拖拽功能 // 完成Modal 编辑Html代码 Boo ...

elementUi el-dialog 对话框实现可拖拽、去掉覆盖层、并可操作底层的按钮

一、对话框实现可拖拽功能

二、对话框去掉覆盖层可操作底层的按钮功能

elementUi el-dialog 对话框实现可拖拽、去掉覆盖层、并可操作底层的按钮相关推荐

最新文章

热门文章