Vue如何實現(xiàn)按鈕旋轉(zhuǎn)和移動位置

這篇文章主要介紹Vue如何實現(xiàn)按鈕旋轉(zhuǎn)和移動位置，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

1.靜態(tài)效果圖

Chrom移動端瀏覽模式下可拖動按鈕處于任意位置，并且點擊可旋轉(zhuǎn)按鈕

2.代碼

<template>
 <div id="app">
  <div class="icon-add-50" : @click='click' @touchmove='touchmove' @touchstart='touchstart(this,$event)' @touchend='touchend'></div>
 </div>
</template>
<script>
export default {
 name: 'App',
 data(){
  return{
   /*--------圖標樣式變量--------------*/
   iconrotate:45,//旋轉(zhuǎn)deg
   icontranslateX:100,//沿x軸位移px
   icontranslateY:100,//沿y軸位移px
   /*--------拖動計算變量------------*/
   mouseX:0,
   mouseY:0,
   objX:0,
   objY:0,
   isDown:false
  }
 },
 methods:{
  click:function(){//圖標點擊事件
   if (this.iconrotate==0) {
     this.iconrotate=315;
   }else {
    this.iconrotate=0;
   }
  },
  touchstart:function(obj,e){//finger touch 觸發(fā)
   this.objX = this.icontranslateX;
   this.objY = this.icontranslateY;
   this.mouseX = e.touches[0].clientX;
   this.mouseY = e.touches[0].clientY;
   this.isDowm = true;
  },
  touchmove:function(e){//finger move 觸發(fā)
   let x = e.touches[0].clientX;
   let y = e.touches[0].clientY;
   if (this.isDowm) {
     this.icontranslateX = parseInt(x) - parseInt(this.mouseX) + parseInt(this.objX);
     this.icontranslateY = parseInt(y) - parseInt(this.mouseY) + parseInt(this.objY);
   }
  },
  touchend:function(e){//finger from touch to notouch
   if (this.isDowm) {
     let x = e.touches[0].clientX;
     let y = e.touches[0].clientY;
     this.icontranslateX = parseInt(x) - parseInt(this.mouseX)+ parseInt(this.objX);
     this.icontranslateY = parseInt(y) - parseInt(this.mouseY)+ parseInt(this.objY);
     this.isDowm=false;
   }
  }
 },
 computed:{
  iconstyle:function(){//圖標動態(tài)樣式
   let arr = new Array();
   arr.push('transform:');//注意：先移動后旋轉(zhuǎn)，實現(xiàn)原地旋轉(zhuǎn)；先旋轉(zhuǎn)后移動，位置按照旋轉(zhuǎn)后的新坐標系確定
   arr.push('translateX('+this.icontranslateX+'px) ');
   arr.push('translateY('+this.icontranslateY+'px) ');
   arr.push('rotate('+this.iconrotate+'deg) ');
   return arr.join("");
  }
 }
}
</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
 /*加號*/
.icon-add-50{
  position: relative;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  border: 2px solid gray;
  border-radius: 50%;
  box-shadow:darkgrey 0px 0px 2px 2px;
  background-color: CornflowerBlue;
}
.icon-add-50:before{
  content: '';
  position: absolute;
  width: 30px;
  height: 2px;
  left: 50%;
  top: 50%;
  margin-left: -15px;
  margin-top: -1px;
  background-color: white;
}
.icon-add-50:after{
  content: '';
  position: absolute;
  width: 2px;
  height: 30px;
  left: 50%;
  top: 50%;
  margin-left: -1px;
  margin-top: -15px;
  background-color: white;
}
</style>

以上是“Vue如何實現(xiàn)按鈕旋轉(zhuǎn)和移動位置”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！