zoukankan      html  css  js  c++  java
  • vue 的elementUI框架 拖动dialog的写法

    转载:https://www.cnblogs.com/mushitianya/p/10507818.html

    在man.js 写入:

    // 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 {
          //ie11里面的el-dialog的left和top是auto但是getComputedStyle中的属性不能设置,所以就在正则中把auto也处理掉
          styL = +sty.left.replace(/px|auto/g, "");
          styT = +sty.top.replace(/px|auto/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;
          };
        };
      }
    });

    dialog中类似这样的写法:

    <el-dialog v-dialogDrag >

    即可

  • 相关阅读:
    java面向对象4-多态
    机器学习降维--SVD奇异值分解
    hive中的null
    熵(二)-交叉熵与相对熵
    指数家族-Beta分布
    指数族函数
    java面向对象3-继承(继承、抽象类、抽象接口)
    网页自动刷新
    spring +hibernate 启动优化【转】
    svn is already locked解决方案
  • 原文地址:https://www.cnblogs.com/llcdbk/p/13039581.html
Copyright © 2011-2022 走看看