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 相关文章推荐
Ext grid 添加右击菜单
Nov 26 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
vue mounted组件的使用
Jun 18 Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
小程序开发之模态框组件封装
Apr 23 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中根据变量的类型 选择echo或dump
2012/07/05 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
学习面向对象之面向对象的术语
2010/11/30 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
原生js调用json方法总结
2018/02/22 Javascript
Python3学习urllib的使用方法示例
2017/11/29 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
python调用c++传递数组的实例
2019/02/13 Python
python导入pandas具体步骤方法
2019/06/23 Python
set在python里的含义和用法
2019/06/24 Python
Python如何实现远程方法调用
2020/08/07 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
室内设计自我鉴定
2013/10/15 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
交通安全寄语大全
2014/04/08 职场文书
法人授权委托书
2014/09/16 职场文书
法定代表人身份证明书
2015/06/18 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
golang goroutine顺序输出方式
2021/04/29 Golang
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技
Java Redisson多策略注解限流
2022/09/23 Java/Android