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 >

    即可

  • 相关阅读:
    laravel 5.5 仓库模式 文件之间接口与实现操作
    php 无线分类 根据子级找父级
    php 无限极分类,根据父级 找子级
    laravel5.4 中 dd和dump的区别。
    laravel hash密码生成和密码验证
    oracle建表详细信息
    关于组件的认识
    java的Thread Dump诊断工具
    weblogic连接池
    详解Oracle数据字典
  • 原文地址:https://www.cnblogs.com/llcdbk/p/13039581.html
Copyright © 2011-2022 走看看