vue实现一个拖拽的圆球组件

最新推荐文章于 2024-09-28 23:29:59 发布

Soil_闰土

最新推荐文章于 2024-09-28 23:29:59 发布

阅读量3.1k

点赞数

分类专栏：前端Vue

本文链接：https://blog.csdn.net/weixin_43494704/article/details/88753167

版权

本文介绍如何使用Vue.js创建一个可拖动的圆形组件，包括JS逻辑、HTML结构和CSS样式。通过示例代码展示拖拽功能的实现过程。

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

演示图如下：

在这里插入图片描述

代码如下

JS部分

Vue.component('dragIcon', {
   
     template: `
       <transition>
           <div ref="dragIcon" 
               class="dragIcon"
               @touchstart="handleTouchStart"
               @touchmove.prevent="handleTouchMove"
               @touchend="handleTouchEnd"
               :style="{left: left + 'px',top: top + 'px',width: itemWidth + 'px',height: itemHeight + 'px'}"
               v-text="text"
               v-if="isShow" 
           >
           </div>
       </transition>
       `,
     props: {
   
       text: {
   
           type: String,
           default: '首页'
       },
       itemWidth: {
   
           type: Number,
           default: 40
       },
       itemHeight: {
   
           type: Number,
           default: 40
       }
     },
     data() {
   
       return {
   
         left: 0,
         top: 0,
         startToMove: false,
         isShow: true,
         timer: null,
         currentTop: null,
         clientW: document.documentElement.clientWidth,
         clientH: document.documentElement.clientHeight
       }
     },
     created () {
   
       this.left = (this.clientW - this.it