Vue实现按钮旋转和移动位置的实例代码
2018-08-09 11:04
1031 查看
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实现按钮旋转和移动位置的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- 实现一个简单的按钮实例-上下左右,左旋转,右旋转,放大缩小。代码重构
- 使用jQuery实现两个div中按钮互换位置的实例代码
- JS返回上一页实例代码通过图片和按钮分别实现
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
- JS返回上一页实例代码通过图片和按钮分别实现
- Java编程实现swing圆形按钮实例代码
- 在代码中实现控件消失后另外的控件动画移动到消失控件的位置
- PHP实现图片旋转效果实例代码
- ios开发--旋转、移动、缩放手势实例代码
- Vuejs 实现简易 todoList 功能 与 组件实例代码
- vue 实现数字滚动增加效果的实例代码
- Qt实现透明无边框,无关闭按钮,带自定义图片的窗体实例代码
- 实现多个div拖拽移动,交换位置功能,代码复制可运行,有交换特效
- Android编程实现3D立体旋转效果的实例代码
- node+vue实现用户注册和头像上传的实例代码
- EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
- Android使用Rotate3dAnimation实现3D旋转动画效果的实例代码
- vue.js 实现评价五角星组件的实例代码
- 微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
- vue实现商品加减计算总价的实例代码