vue实现移动端可拖拽浮动球按钮

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

一梦晓三生

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

阅读量959

点赞数 2

分类专栏：日常问题记录常用小组件文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/zzz00008LN/article/details/122100861

版权

本文介绍了如何使用Vue.js在移动端实现可拖拽的浮动球按钮，提供了示例效果，展示了具体的操作体验。

摘要由CSDN通过智能技术生成

vue实现移动端可拖拽浮动球按钮

<template>
  <transition>
    <div ref="dragIcon" class="dragIcon" @click="onBtnClicked" @touchstart.stop="handleTouchStart" @touchmove.prevent.stop="handleTouchMove($event)" @touchend.stop="handleTouchEnd"
      :style="{left: left + 'px',top: top + 'px',width: itemWidth + 'px',height: itemHeight + 'px'}" v-if="isShow">
      <slot></slot>
    </div>
  </transition>
</template>

<script>
export default {
   
  props: {
   
    itemWidth: {
   
      type: Number,
      default: 50,
    },
    itemHeight: {
   
      type: Number,
      default: 50,
    },
  },
  data() {
   
    return {
   
      left: 0,
      top: 0,
      startToMove: false,
      isShow: true,
      timer: null,
      currentTop: null,
      clientW: document.documentElement.clientWidth, //视口宽
      clientH: document.documentElement.clientHeight, //视口高
    }
  }