Vue实现按钮旋转和移动位置Demo

最新推荐文章于 2025-03-01 09:00:00 发布

swiftlinlei

最新推荐文章于 2025-03-01 09:00:00 发布

阅读量9.7k

点赞数 3

分类专栏：前端文章标签： Vue 按钮可移动可旋转

本文链接：https://blog.csdn.net/swiftlinlei/article/details/81507205

版权

本文展示了一个使用Vue实现的按钮，该按钮在Chrome移动端可以被拖动到任意位置，并且支持点击后旋转的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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==