Vue实现按钮旋转和移动位置的实例代码

<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,//旋转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 触发   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 触发   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(){//图标动态样式   let arr = new Array();   arr.push('transform:');//注意：先移动后旋转，实现原地旋转；先旋转后移动，位置按照旋转后的新坐标系确定   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>