import Vue from 'vue'
Vue. directive ( 'dialogDrag' , { bind ( el, binding, vnode ) { const dialogHeaderEl = el. querySelector ( '.el-dialog__header' ) const dragDom = el. querySelector ( '.el-dialog' ) dialogHeaderEl. style. cssText += ';cursor:move;' dragDom. style. cssText += ';top:0px;' const getStyle = ( function ( ) { if ( window. document. currentStyle) { return ( dom, attr ) => dom. currentStyle[ attr] } else { return ( dom, attr ) => getComputedStyle ( dom, false ) [ attr] } } ) ( ) dialogHeaderEl. onmousedown = e => { const disX = e. clientX - dialogHeaderEl. offsetLeftconst disY = e. clientY - dialogHeaderEl. offsetTopconst dragDomWidth = dragDom. offsetWidthconst screenWidth = document. body. clientWidthconst screenHeight = document. body. clientHeightconst minDragDomLeft = dragDom. offsetLeftconst maxDragDomLeft = screenWidth - dragDom. offsetLeft - dragDomWidthconst minDragDomTop = dragDom. offsetTopconst maxDragDomTop = screenHeight - dragDom. offsetTop let styL = getStyle ( dragDom, 'left' ) let styT = getStyle ( dragDom, 'top' ) if ( styL. includes ( '%' ) ) { styL = + document. body. clientWidth * ( + styL. replace ( / \% / g , '' ) / 100 ) styT = + document. body. clientHeight * ( + styT. replace ( / \% / g , '' ) / 100 ) } else { styL = + styL. replace ( / \px / g , '' ) styT = + styT. replace ( / \px / g , '' ) } document. onmousemove = function ( e ) { let left = e. clientX - disXlet top = e. clientY - disYif ( - left > minDragDomLeft) { left = - minDragDomLeft} else if ( left > maxDragDomLeft) { left = maxDragDomLeft} if ( - top > minDragDomTop) { top = - minDragDomTop} else if ( top > maxDragDomTop) { top = maxDragDomTop} dragDom. style. cssText += ` ;left: ${ left + styL} px;top: ${ top + styT} px; ` vnode. child. $emit ( 'dragDialog' ) } document. onmouseup = function ( e ) { document. onmousemove = null document. onmouseup = null } } }
} )