Vue实现按钮旋转和移动位置的实例代码
程序员文章站
2022-03-31 13:45:46
1.静态效果图
chrom移动端浏览模式下可拖动按钮处于任意位置，并且点击可旋转按钮
2.代码
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实现按钮旋转和移动位置的实例代码，希望对大家有所帮助
上一篇： [ASP.NET AJAX]Function对象及Type类的方法介绍
下一篇： AJAX 常用函数