vue el-dialog 弹窗实现拖拽效果

我不是女神ヾ 2022-12-25 02:57 675阅读 0赞

### 文章目录 ###

*  前言
 *  一、如何在 elementUI el-dialog 对话框添加拖拽操作？
 *   *  1. 首先我们将新建一个js文件 dialog.js 放在项目的对应位置，将下面代码复制到文件中；
     *  2. 其次我们要在 main.js 文件中引入该 js 文件；
     *  3. 在其他 vue 文件中使用可拖动的 el-dialog ；
 *  二、效果展示
 *   *  1.树表触摸对话框顶部时就会出现拖动的鼠标样式，按住鼠标就可以拖动对话框到窗口任意位置了
 *  总结

--------------------

# 前言 #

我们在使用 elementUI 中的 el-dialog 对话框组件时，位置默认是经过设置的固定位置，会遮挡住对话框后面的文本，在使用时想看下后面的文本需要关闭对话框再操作，效果非常的不理想，要是对话框可以拖拽移动位置就很人性化；

--------------------

# 一、如何在 elementUI el-dialog 对话框添加拖拽操作？ #

## 1. 首先我们将新建一个js文件 dialog.js 放在项目的对应位置，将下面代码复制到文件中； ##

/util/dialog.js

import Vue from 'vue'
    // v-dialogDrag: 弹窗拖拽
    Vue.directive('dialogDrag', { 
      bind(el, binding, vnode, oldVnode) { 
        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);
        dialogHeaderEl.onmousedown = (e) => { 
          // 鼠标按下，计算当前元素距离可视区的距离
          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;
            // 移动当前元素
            dragDom.style.left = `${ l + styL}px`;
            dragDom.style.top = `${ t + styT}px`;
            // 将此时的位置传出去
            // binding.value({x:e.pageX,y:e.pageY})
          }
          document.onmouseup = function (e) { 
            document.onmousemove = null;
            document.onmouseup = null;
          }
        }
      }
    })

--------------------

## 2. 其次我们要在 main.js 文件中引入该 js 文件； ##

main.js

import Vue from 'vue';
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    import './util/dialog' // 引入可拖动的js
    
    import App from './App.vue';
    
    Vue.use(ElementUI);
    
    new Vue({ 
      el: '#app',
      render: h => h(App)
    });

--------------------

## 3. 在其他 vue 文件中使用可拖动的 el-dialog ； ##

其他 vue 文件中使用 dialog 时配置 v-dialogDeag 就可以了

<el-dialog
        :visible.sync="dialogVisible"
        :append-to-body="true"
        width="500px"
        title="请选择"
        :close-on-click-modal="false"
        v-dialogDrag
    >
    </el-dialog>

# 二、效果展示 #

## 1.树表触摸对话框顶部时就会出现拖动的鼠标样式，按住鼠标就可以拖动对话框到窗口任意位置了 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70]  
电脑截图截取不到效果，手机拍摄粗糙了一些。

--------------------

# 总结 #

以上就是如何给 el-dialog 添加拖拽功能，添加此功能后效果很明显，使用起来更加方便。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70]: /images/20221120/2202868b75cb4d4ea3b03a103452779d.png