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

1.静态效果图

Chrom移动端浏览模式下可拖动按钮处于任意位置，并且点击可旋转按钮

2.代码

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

总结

以上所述是小编给大家介绍的Vue实现按钮旋转和移动位置的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！