实现一个返回首页的小按钮，可以进行拖动 vue

ジ Jing

于 2020-03-13 10:04:51 发布

阅读量531

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_43983711/article/details/104834809

版权

本文介绍如何在Vue项目中创建一个可拖动的首页返回按钮，详细阐述了实现这一功能的需求和具体步骤。

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

需求：实现一个返回首页的小按钮，可以进行拖动。
在这里插入图片描述

<template>
  <div
    class="back-home"
    @click="goUrl"
    ref="moveBtn"
    @mousedown="down"
    @touchstart="down"
    @mousemove="move"
    @touchmove="move"
    @mouseup="end"
    @touchend="end"
    @touchcancel="end"
  >
 // 显示的图片 不一样
    <div @touchstart="showActive(1)" @touchend="showActive(0)">  //手指进入事件 // 手指离开事件   
      <img v-if="active == 0" src="../assets/img/back-jm.png" alt="" />
      <img v-else class="hide_tab" src="../assets/img/back-yd.png" alt="" />
    </div>
  </div>
</template>