vue可以變化大小移動的按鈕組件

vue可以變化大小移動的按鈕

先看效果在貼代碼
代碼，我覺得註釋挺全的，就不講解了，有問題私聊留言皆可

<template>
  <div id="vue" >
  <div id="d1" @mousedown="change('sw')"  ></div>
   <div id="d2"  @mousedown="change('s')" ></div>
    <div id="d3"  @mousedown="change('se')" ></div>
     <div id="d4"  @mousedown="change('w')" ></div>
      <div id="d5" @mousedown="move"  ></div>
       <div id="d6"  @mousedown="change('e')"  ></div>
        <div id="d7"  @mousedown="change('nw')" ></div>
         <div id="d8"  @mousedown="change('n')" ></div>
         <div id="d9"   @mousedown="change('ne')" ></div>
  </div>
</template>

<script type="text/javascript">
  export default { 
  //這裏需要將模塊引出，可在其他地方使用
    name: "Move_Button",
    props: ['message'],
    data (){ 
      return {
        // message: "A great expedition!"
      }
    },
    methods:{
      move(e){
            let odiv =  document.getElementById("vue");        //獲取目標元素
            //算出鼠標相對元素的位置
            let disX = e.clientX - odiv.offsetLeft;
            let disY = e.clientY - odiv.offsetTop;
            document.onmousemove = (e)=>{       //鼠標按下並移動的事件
                //用鼠標的位置減去鼠標相對元素的位置，得到元素的位置
                let left = e.clientX - disX;    
                let top = e.clientY - disY;
                 odiv.style.left = left + 'px';
                 odiv.style.top = top + 'px';
            };
            document.onmouseup=(e)=>{
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }  ,
            change(asc){
            let as=asc;
            let odiv =  document.getElementById("vue");        //獲取目標元素
            let width=odiv.offsetWidth;
            let height=odiv.offsetHeight;
            let left= odiv.offsetLeft+width/2;     //獲取目標中心點原位置
            let top = odiv.offsetTop+height/2;
            document.onmousemove=(e)=>{
            //算出鼠標相對元素的位置及變化的大小
            // alert(odiv.width);
            let disW = e.clientX - left;
            let disH= e.clientY - top;
            let disX = left-Math.abs(disW)*2+width/2;
            let disY = top-Math.abs(disH)*2+height/2;
            //默認變化大小是向左向下變化，因此向上或者向左變化大小需要移動位置來保證視覺效果
                if(as.search("s")!= -1){
                 odiv.style.height = Math.abs(disH*2)+'px';
                 odiv.style.top = disY + 'px';
            }
                if(as.search("n")!= -1){
                 odiv.style.height = Math.abs(disH*2)+'px';
            }
                 if(as.search("w")!= -1){
                 odiv.style.width = Math.abs(disW*2)+ 'px';
                 odiv.style.left = disX + 'px';
            }
                if(as.search("e")!= -1){
                 odiv.style.width = Math.abs(disW*2)+ 'px';
            }
            };
            document.onmouseup=(e)=>{
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }  
		}
  }  
</script> 

<style type="text/css">
  #vue{
    position: relative;   
    height: 200px;
		width: 200px;
		position: fixed;
		z-index: 99999;
   border-style: solid;
  }
      #d1{
    position: relative;    
    cursor:nw-resize;
    float: left;
    width: 10%;
    height: 10%;
    background: #c1dd95;
  }
  #d2{
      position: relative;    
      float: left;
    cursor: n-resize;
    width: 80%;
    height: 10%;
background: #9dc7e4;
  }
  #d3{
      position: relative;    
    cursor: ne-resize;
    float: left;
     width: 10%;
    height: 10%;
   background: #c1dd95;
  }
  #d4{
      position: relative;    
    cursor: w-resize;
    float: left;
    width: 10%;
    height: 80%;
background: #9dc7e4;
  }
  #d5{
      position: relative;    
    cursor: crosshair;
    float: left;
    width: 80%;
    height: 80%;
background: #c1dd95;
  }
  #d6{
      position: relative;    
    cursor: e-resize;
    float: left;
     width: 10%;
    height: 80%;
 background: #9dc7e4;
  }
  #d7{
     position: relative;   
    cursor: sw-resize;
    float: left;
    width: 10%;
    height: 10%;
background: #c1dd95;
  }
  #d8{
      position: relative;    
    cursor: s-resize;
    float: left;
    width: 80%;
    height: 10%;
 background: #9dc7e4;
  }
  #d9{
      position: relative;    
    cursor: se-resize;
    float: left;
     width: 10%;
    height: 10%;
    background: #c1dd95;
  }
</style>