VUE实现缩放 通过自定义指令

    // 自定义指令
    directives:{
        zoom(el,binding,vnode) { 
            let that = vnode.context
            el.onmousedown = function (e) {  
                e.preventDefault()  
                console.log("缩放点击事件")
                let currentKey = binding.value.index//当前操作的数组下标
                let parentId = "a_particle" + binding.value.index + that.currentId//组件ID  
                delete window.zoomEcharts
                that.JsonData[currentKey].canDrag = false   
                
                let parent = document.getElementById('dragDiv'+that.currentId) 
                
                let parentWidth = parent.offsetWidth  // 父元素宽度
                // 父级元素 距离 视口 左侧及顶部的距离
                let wisdomTop = parent.getBoundingClientRect().top   
                let wisdomLeft = parent.getBoundingClientRect().left   
                
                // 开始移动
                document.onmousemove = function (e) {  
                        let dom = document.getElementById(parentId)    
                        let ph = dom.offsetHeight// 当前高度 
                        let pw = dom.offsetWidth // 当前宽度  
                        console.log("缩放事件触发")
                        document.getElementById(parentId).style.border='1px dashed'
                        // 当前鼠标位置
                        let pageX = e.clientX + (dom && dom.scrollLeft  || 0) - (dom && dom.clientLeft  || 0);
                        let pageY = e.clientY + (dom && dom.scrollTop || 0) -  (dom && dom.clientTop || 0 );
 
                        if(
                            (pageX-wisdomLeft-dom.offsetLeft) < that.prillingConfig.minW || //最小宽度限制
                            (pageY-wisdomTop-dom.offsetTop) < that.prillingConfig.minH || //最小高度限制
                            pageX > (parentWidth + wisdomLeft) //最大宽度
                        ){
                            return
                        }

                        // 求宽
                        dom.style.width = (pageX-wisdomLeft-dom.offsetLeft)/parentWidth*100+'%' 
                        let height = pageY-wisdomTop-dom.offsetTop
                        // 设置高度
                        if(that.JsonData[currentKey].style.heightA){
                            that.JsonData[currentKey].style.heightB = ''
                            dom.style.height= height+'px'
                            that.JsonData[currentKey].style.heightA= height 
                        }else{
                            that.JsonData[currentKey].style.heightA = '' 
                            height = height/document.getElementById("dragDiv"+that.currentId).offsetHeight*100
                            dom.style.height=height+'%'
                            that.JsonData[currentKey].style.heightB= height 
                        }
                        // 设置宽度
                        that.JsonData[currentKey].style.widthB = (pageX-wisdomLeft-dom.offsetLeft)/parentWidth*100
                   
                        // 设置是否缩放后需要进行resize事件
                        if(that.typeOfEcharts.includes(that.JsonData[currentKey].strAtomCode.toString())){ 
                            if(window.zoomEcharts)return;
                            window.zoomEcharts = setTimeout(()=>{ 
                                window.zoomEcharts = false
                                console.log("asssssss")
                                try{  
                                    window.myEcharts[that.JsonData[currentKey].id].resize() 
                                }catch(err){}
                            },150)
                        }

                }
                // 鼠标拖拽结束
                document.onmouseup = function (e) {
                    that.JsonData[currentKey].canDrag = true
                    document.onmousemove = null; 
                    document.onmouseup = null;
                    document.getElementById(parentId).style.border='' 
                    delete window.zoomEcharts  
                }
            }
        },

}