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

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

(0)

相关推荐

  • vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

    一.前言 三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload),或者传统上传图片的方式,各有利弊:插件的问题是依赖jq并且会使系统比较臃肿,还有传统的web开发模式 前后端偶尔在一起及对用户体验要求低,现在公司采用webpack+vue+restfullApi开发模式 前后端完全分离,遵从高内聚,低偶尔的原则,开发人员各司其职,一则提升开发效率(从长期来看,短期

  • vue2实现移动端上传、预览、压缩图片解决拍照旋转问题

    因为最近遇到个移动端上传头像的需求,上传到后台的数据是base64位,其中为了提高用户体验,把比较大的图片用canvas进行压缩之后再进行上传.在移动端调用拍照功能时,会发生图片旋转,为了解决这个问题引入了exif去判断拍照时的信息再去处理图片,这是个很好的插件.关于exif.js可以去他的GitHub上了解,这边直接 npm install exif-js --save   安装,然后import一下就可以使用了.以下就是源码,可以直接使用. <template> <div> &

  • vue实现裁切图片同时实现放大、缩小、旋转功能

    本篇文章主要介绍了vue实现裁切图片同时实现放大.缩小.旋转功能,分享给大家,具体如下: 实现效果: 裁切指定区域内的图片 旋转图片 放大图片 输出bolb 格式数据 提供给 formData 对象 效果图 大概原理: 利用h5 FileReader 对象, 获取 <input type="file"/> "上传到浏览器的文件" ,文件形式 为base64形式, 把 base64 赋给canvas的上下文. 然后给canvas 元素上加入对(moused

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

    1.静态效果图 Chrom移动端浏览模式下可拖动按钮处于任意位置,并且点击可旋转按钮 2.代码 <template> <div id="app"> <div class="icon-add-50" :style="iconstyle" @click='click' @touchmove='touchmove' @touchstart='touchstart(this,$event)' @touchend='touch

  • vue scroller返回页面记住滚动位置的实例代码

    1,设置keepAlive:是否缓存 router: { path: '/actlist', name: 'actlist', component: actlist, meta: { keepAlive: true } } 2,设置渲染页面 app.vue <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <rout

  • 使用jQuery实现两个div中按钮互换位置的实例代码

    效果如下 代码如下: <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-2.1.0.js"></script> <script type="text/javascript"> $(function() { /

  • vue实现表格增删改查效果的实例代码

    整理文档,搜刮出一个vue实现表格增删改查效果的实例代码,稍微整理精简一下做下分享. 实现效果 我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男', province: '北京市', hobby: ['篮球', '读书', '编程'] }, { username: 'bbbbb', email: 'bbbbbbb@163.com', sex: '女', p

  • Vue组件之高德地图地址选择功能的实例代码

    注:本文基于上一篇文章[Vue-Cli 3.0 中配置高德地图 ] ,采用直接引入高德 SDK 的方式来使用高德地图api 一.效果图 二.组件要实现的功能 1. 如果有传入坐标点,则定位到坐标点 2. 如果没有传入坐标点,则定位到当前所在位置 3. 定位成功要在右侧显示经纬度和地址 4. 可以通过拖动 标记 来调整定位点 5. 标记 拖动后,右侧要显示拖动后的经纬度和地址 6. 点击确定按钮,返回最后的坐标点和地名给父组件 三. 组件实现具体代码 <template> <div cla

  • Android基于高德地图poi的仿微信获取位置功能实例代码

    1.打开页面自动定位,同时搜索周边所有poi 2.点击搜索按钮,输入关键子,获取关键字搜索结果 3.选取listview中的一项即可定位到该位置,或者获取任何消息 4.文件类 1.MapActivity public class MapActivity extends Activity implements PoiSearch.OnPoiSearchListener { private MapView mMapView = null; private AMap aMap; private MyL

  • Vue.js动态添加、删除选题的实例代码

    大家先看看页面效果吧,当当当当``````````````````````` 图中第二个选题是小颖点击了"新增选题"按钮,然后出来的,当你点击了"删除选项"或"删除选题"按钮,就会删除相应的选项和选题. html代码 <template> <div class="main-container"> <div class="form-horizontal"> <temp

  • BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码

    在某些情况下,反馈图标未正确显示.默认情况下,Bootstrap定义反馈图标位置如下: .has-feedback .form-control-feedback { top: 25px; right: 0; } .form-horizontal .has-feedback .form-control-feedback { top: 0; right: 15px; } 通过自定义值top和right属性,您可以将反馈图标调整为应有的位置. 按钮组 .btn-group .form-control-

  • vue滚动固定顶部及修改样式的实例代码

    滚动固定位置有多种方法 1 css3  粘性定位 position:sticky: top:20px: 2直接position:fixed:给顶部盒子设置一个margin-top刚好是需要固定的盒子的高度 3事件监听更改style中的position属性 ** 修改样式 滚动监听事件中使用this.$refs.xxx.style.color='xxxx' 这种方式会报错 Uncaught TypeError: Cannot read property 'style' of undefined 所

  • Vue 使用计时器实现跑马灯效果的实例代码

    Vue 使用计时器实现跑马灯效果,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="

随机推荐