<template> <div id="app">  <div class="icon-add-50" :style="iconstyle" @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>