element-ui中el-dialog放大缩小，弹出框移动，取消阴影

最新推荐文章于 2024-05-04 03:05:58 发布

卤蛋⑦号

最新推荐文章于 2024-05-04 03:05:58 发布

阅读量988

点赞数 10

分类专栏： vue 文章标签： ui vue.js elementui

本文链接：https://blog.csdn.net/weixin_47050857/article/details/137377346

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在ElementUI的el-dialog组件中实现放大缩小功能，处理关闭后状态、移动弹出框的问题，并提供了关于拖拽和阴影设置的解决方案。

摘要由CSDN通过智能技术生成

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;
}