element-ui中el-dialog放大缩小,弹出框移动,取消阴影
el-dialog 常见的使用方法
https://element.eleme.cn/#/zh-CN/component/dialog
el-dialog 放大缩小
1. el-dialog 标签中添加:fullscreen="isFullscreen"
2. 添加放大缩小图标<svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" class="hover-effect" @click="handleScreen" />
3. data中默认 isFullscreen: false
4. methods添加方法 handleScreen(){this.isFullscreen = !this.isFullscreen;}
问题1:当弹出框是放大状态时,点击关闭;此时再打开弹出框还是放大状态
解决办法:
1. 在el-dialog标签中添加一个关闭方法@close="dialogClosed"
2. methods中添加
dialogClosed(){
this.isFullscreen = false
}
问题2:当弹出框移动到其他位置时,点击关闭;此时再打开弹出框容易找不到弹出框位置
解决办法:
在el-dialog标签中添加v-if标签
重新渲染
问题3:当弹出框放大之后,如果存在默认边距影响,不会占满全屏且可以移动
解决办法:
::v-deep .is-fullscreen.el-dialog {
margin: 0 !important;
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
}
el-dialog 移动
封装js组件(直接复制)
/**
* v-dialogDrag 弹窗拖拽
* Copyright (c) 2019 ruoyi
*/
export default {
bind(el, binding, vnode, oldVnode) {
const value = binding.value
if (value == false) return
// 获取拖拽内容头部
const dialogHeaderEl = el.querySelector('.el-dialog__header');
const dragDom = el.querySelector('.el-dialog');
dialogHeaderEl.style.cursor = 'move';
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
dragDom.style.position = 'absolute';
dragDom.style.marginTop = 0;
let width = dragDom.style.width;
if (width.includes('%')) {
width = +document.body.clientWidth * (+width.replace(/\%/g, '') / 100);
} else {
width = +width.replace(/\px/g, '');
}
dragDom.style.left = `${(document.body.clientWidth - width) / 2}px`;
// 鼠标按下事件
dialogHeaderEl.onmousedown = (e) => {
let finallyL
let finallyT
// 鼠标按下,计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)
const disX = e.clientX - dialogHeaderEl.offsetLeft;
const disY = e.clientY - dialogHeaderEl.offsetTop;
// 获取到的值带px 正则匹配替换
let styL, styT;
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (sty.left.includes('%')) {
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
} else {
styL = +sty.left.replace(/\px/g, '');
styT = +sty.top.replace(/\px/g, '');
};
// 鼠标拖拽事件
document.onmousemove = function (e) {
// 通过事件委托,计算移动的距离 (开始拖拽至结束拖拽的距离)
const l = e.clientX - disX;
const t = e.clientY - disY;
finallyL = l + styL
finallyT = t + styT
// 移动当前元素
dragDom.style.left = `${finallyL}px`;
dragDom.style.top = `${finallyT}px`;
};
document.onmouseup = function (e) {
if (finallyT <= 0) {
dragDom.style.top = '0px';
}
document.onmousemove = null;
document.onmouseup = null;
};
}
}
};
在main.js中引入
import directive from './组件路径'
Vue.use(directive)
在el-dialog标签中添加
v-dialogDrag :modal="false"
如果想去除阴影且可以点击下层
可以在main.js中添加
Element.Dialog.props.closeOnClickModal.default = false //默认点击弹窗以外的部分不关闭
//可以点击弹出框以外部分,触发点击事件
.el-dialog__wrapper{
pointer-events: none;
}
.el-dialog{
pointer-events: auto;
}
::v-deep .el-dialog {
pointer-events: auto;
}