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


Posted in Javascript onAugust 09, 2018

1.静态效果图

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

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实现按钮旋转和移动位置的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
Document对象内容集合(比较全)
Sep 06 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 #Javascript
JavaScript引用类型Function实例详解
Aug 09 #Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 #jQuery
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 #Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 #Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 #Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 #Javascript
You might like
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
Python对象与引用的介绍
2019/01/24 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
聚美优品恶搞广告词
2014/03/14 职场文书
村干部承诺书
2014/03/28 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
庆六一开幕词
2015/01/29 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
Python预测分词的实现
2021/06/18 Python