Vue实现按钮可旋转和移动且有边界Demo

Vue实现按钮动态旋转与移动边界限制

最新推荐文章于 2024-08-06 16:48:19 发布

原创

最新推荐文章于 2024-08-06 16:48:19 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #有边界 #可移动 #可旋转 #按钮

本文展示了如何在Vue中实现一个按钮组件，该组件可在Chrome移动端自由移动并支持点击旋转，同时具备边界限制，确保按钮始终在可视区域内。

1.效果

在Chrome移动端浏览模式下，按钮在可见区域内随意拖动并且点击可旋转

2.代码

<template>
  <div id="app">
    <div align="left">translateX:{
  
  {this.icontranslateX}}</div>
    <div align="left">translateY:{
  
  {this.icontranslateY}}</div>
    <div align="left">clientWidth:{
  
  {this.clientWidth}}</div>
    <div align="left">clientHeight:{
  
  {this.clientHeight}}</div>
    <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
      icontrans