elementUI pop-up box can add custom drag and stretch function, process and Boundary

1, first create a js file in vue project eg: dialog.js

Vue from Import 'VUE'
 // V-dialogDrag: pop drag properties 
Vue.directive ( 'dialogDrag' , { 
  the bind (EL, Binding, the vnode, oldVnode) { 
　　　　　// custom attribute, determines whether the drag　
    IF ( ! binding.value) return 
    const dialogHeaderEl = el.querySelector ( '.-dialog__header EL' ) 
    const dragDom = el.querySelector ( 'EL-Dialog.' ) 
    dialogHeaderEl.style.cssText + = '; Cursor: Move;' 
    dragDom. style.cssText + = '; Top: 0px;' // Get original attribute ie dom element .currentStyle Firefox Google window.getComputedStyle (dom element, null); 
    const STY = ( function () {
       IF

    (document.body.currentStyle) {
         // compatible ie written in 
        return (DOM, attr) => dom.currentStyle [attr] 
      } the else {
         return (DOM, attr) => the getComputedStyle (DOM, to false ) [attr] 
      } 
    }) () 

    dialogHeaderEl.onmousedown = (E) => {
       // mouse-down, the current element is calculated from the distance of the visible region 
      const = e.clientX disX - dialogHeaderEl.offsetLeft 
      const disY = e.clientY - dialogHeaderEl.offsetTop 

      const screenWidth = document.body.clientWidth // body current width
      document.documentElement.clientHeight screenHeight = const // visible area height (body height should, under certain circumstances, can not obtain) 

      const dragDomWidth = dragDom.offsetWidth // box width 
      const = dragDom.offsetHeight dragDomheight // dialog height 

      const minDragDomLeft = dragDom.offsetLeft 
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth 

      const minDragDomTop = dragDom.offsetTop 
      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight 

      // Get the value match with regular px Alternatively 
      let styL = sty (dragDom, ' left ' )
 　　　　　// compatible ie　
      IF (=== STYL 'Auto') STYL = '0px' 
      the let styT = STY (dragDom, 'Top' ) 

      the console.log (STYL) 
      // note the value obtained in the first ie the after 50% of the mobile assembly carrying assigned PX 
      IF (styL.includes ( '%' )) { 
        STYL = + document.body.clientWidth * (+ styL.replace (/% / G, '') / 100 ) 
        styT document.body.clientHeight + * = (+ styT.replace (/% / G, '') / 100 ) 
      } the else { 
        STYL = + styL.replace (/ PX / G, '' ) 
        styT = + styT.replace ( / PX / G, '' ) 
      }; 

      Document.onmousemove = function (E) { 
        
        // by event delegate, calculates the movement distance of 
        the let e.clientX = left - disX 
        the let Top = e.clientY - disY
         // boundary processing 
        IF (- (left)> minDragDomLeft) { 
          left = - (minDragDomLeft ) 
        } the else  IF (left> maxDragDomLeft) { 
          left = maxDragDomLeft 
        } 

        IF (- (Top)> minDragDomTop) { 
          Top = - (minDragDomTop) 
        } the else  IF (Top>  maxDragDomTop) {
          Top= MaxDragDomTop 
        } 

        // move the current element 
        dragDom.style.cssText + = `; left: left $ {+} STYL PX; Top: Top + $ { styT} PX;` 
      } 

      document.onmouseup = function (E) { 
        Document. onMouseMove = null 
        document.onmouseup = null 
      } 
      return  to false 
    } 
  } 
}) 

Vue.directive ( 'dialogChange' , { 
  the bind (EL, Binding, the vnode, oldVnode) { 
　　　　　// custom attribute, determines whether or not stretchable 
    iF (! Binding .Value) return 
    const dragDomEl.querySelector = ( '. EL-Dialog' ) 
    the let dragMouse 
    // at the bottom right of the pop-up box flag added stretchable = class 'Mouse' 
    for (the let I = 0; I <dragDom.childNodes [2] .childNodes. length; I ++ ) {
       IF (dragDom.childNodes [2] .childNodes [I] .className === 'mouse' ) { 
        dragMouse = dragDom.childNodes [2 ] .childNodes [I] 
      } 
    } 
    // mouse drag 
    dragMouse. = onMouseDown (E) => {
       // Content area 
      const Content = dragDom.parentNode.parentNode.parentNode.parentNode 
      const disX = e.clientX -dragDom.offsetWidth 
      const disY = e.clientY - dragDom.offsetHeight 

      document.onmousemove = function (E) { 
        e.preventDefault () // disable the default event moves 
        // by event delegate, calculates the movement distance of 
        the let width = e.clientX - disX 
        height the let = e.clientY - disY 

        IF (width> content.offsetWidth && height < content.offsetHeight) { 
          dragDom.style.height = `$ {height px`} 
        } the else  IF (width <content.offsetWidth && height> Content. the offsetHeight) { 
          dragDom.style.width = `$ {} width px`
        } else if (width < content.offsetWidth && height < content.offsetHeight) {
          dragDom.style.width = `${width}px`
          dragDom.style.height = `${height}px`
        }
      }
      document.onmouseup = function (e) {
        document.onmousemove = null
        document.onmouseup = null
      }
      return false
    }
  }
})

2, the reference in main.js

import './components/dialog'

3, dialog component code to add v-if in order to allow pop-ups every time a change is not inherited on:

<el-dialog
        v-if=dialog.dialogVisible
        v-dialogDrag:{dialogDrag}=dialog.dialogDrag
        v-dialogChange:{dialogChange}=dialog.dialogChange
        ref="dialog__wrapper"
        :close-on-click-modal="false"
        :title=dialog.title
        :visible.sync="dialog.dialogVisible"
        :before-close="handleClose">
        <div class="dialog-body">
          <div class="line">
            <slot name="content"></slot>
          </div>
        </div>
        <slot slot="footer" class="dialog-footer"></slot>
      </el-dialog>

4, when the reference component, data returns a:

Dialog: { // Dialog show hidden 
        dialogVisible: to false , 
        dialogDrag: to true , // draggable 
        dialogChange: to true , // stretchable 
        title: 'Details' 
      }