这篇文章主要介绍Vue如何实现按钮旋转和移动位置，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
1.静态效果图
Chrom移动端浏览模式下可拖动按钮处于任意位置，并且点击可旋转按钮
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,//旋转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如何实现按钮旋转和移动位置”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
