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;
}