zoukankan      html  css  js  c++  java
  • elementui移动dialog

    1、在创建Vue对象时添加全局属性

    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、在使用elementui的Dialog时,添加dialogDrag属性,注意,这个dialogDrag与上面所创建的名称一致

  • 相关阅读:
    PageAdmin Cms系统如何修改点击数(浏览数)
    最简js深浅拷贝说明
    实用的前端网址
    js的一些编码问题
    自己写一个文字过长显示省略号的函数
    垂直居中 和 水平居中
    js原码工具集
    url 、src 、href 的区别
    transform对定位元素的影响
    css实现一色多变化
  • 原文地址:https://www.cnblogs.com/caohanren/p/12073269.html
Copyright © 2011-2022 走看看