vue自定義指令實現拖拽縮放元素的寬度

 

改變觸發拖放元素的背景顏色爲白色，即可模擬真實的拖放效果。

<!-.app-shrink是要縮放的元素，.app-shrink-drag是觸發鼠標按下移動的源->
<div :style="shirnkStyle" class="app-shrink" v-show="visible">
   <div class="app-shrink-drag" style="background:red" v-drag='{set:set}' @mousedown="dragonmousedown"></div>			
</div>

data() {
      return {
            widthVal:"926", //存放要縮放元素.app-shrink的實時變動寬度值
            oldWidthVal:"926", //存放.app-shrink-drag是觸發鼠標按下時，要縮放元素.app-shrink的su寬度值。
            dragVal:0    //存放實時鼠標的x軸移動值
      }
},
computed: {     
        shirnkStyle() {  //動態計算要縮放元素的寬度
            return {                
                'width':this.widthVal +"px"          
            };
        },
},
watch: {
   dragVal(val){          
       this.widthVal=parseInt(this.oldWidthVal)-parseInt(val)          
   }  
},
directives:{  //註冊自定義局部指令
        drag(el,bindling){        
            let oDiv = el; //當前元素          
            oDiv.onmousedown = function(e) {              
                e.preventDefault(); 
                let disX = e.clientX ;
                document.onmousemove = function(e) {
                    e.preventDefault(); 
                    let l = e.clientX - disX;                
                    bindling.value.set(l)   //將鼠標按下實時變動的值從自定義指令中傳遞出去
                };
                document.onmouseup = function(e) {
                    e.preventDefault(); 
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            };
        }
}
.app-shrink-drag{
    position: absolute;
    left: 0px;
    height: 100%;
    top: 0;
    width: 13px;
    cursor: w-resize;
}