可拖拽悬浮按钮组件支持vue3/vue2

这个组件实现了一个可以在屏幕上拖拽移动的圆形悬浮按钮，具有以下特点：

支持触摸移动功能
可以切换显示图标（重载图标或加号图标）
点击后触发扫描事件
固定定位在屏幕上的浮动按钮样式

vue3版本

复制代码

<template>
  <view
    class="float-button"
    :style="{ bottom: buttonButtom + 'px', right: buttonRight + 'px' }"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    @touchstart="handleTouchStart"
    @click="goScan"
  >
    <uv-icon v-if="!show_add" name="scan" size="100rpx" color="#fff"></uv-icon>
    <uv-icon v-if="show_add" name="plus" size="70rpx" color="#fff"></uv-icon>
  </view>
</template>

<script setup>
import { ref } from "vue";
const buttonButtom = ref(180);
const buttonRight = ref(10);
const startX = ref(0);
const startY = ref(0);
const isDragging = ref(false);

// 扫码悬浮按钮封装
const props = defineProps({
  show_add: {
    type: Boolean,
    default: false, // 默认值
  },
});

const handleTouchStart = (event) => {
  startX.value = event.touches[0].pageX;
  startY.value = event.touches[0].pageY;
  isDragging.value = true;
};
const handleTouchMove = (event) => {
  if (isDragging.value) {
    const moveX = event.touches[0].pageX;
    const moveY = event.touches[0].pageY;
    buttonButtom.value += startY.value - moveY;
    buttonRight.value += startX.value - moveX;
    startX.value = moveX;
    startY.value = moveY;
  }
};
const handleTouchEnd = () => {
  isDragging.value = false;
};

const emit = defineEmits();

// 子组件传递给父组件的方法
const goScan = () => {
  emit("goScan");
};
</script>

<style>
.float-button {
  position: fixed;
  width: 120rpx;
  height: 120rpx;
  background-color: #003f98;
  color: white;
  text-align: center;
  line-height: 120rpx;
  border-radius: 50%;
  user-select: none;
  touch-action: none;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5);
}
</style>

vue2版本

复制代码

<template>
  <view
    class="float-button"
    :style="{ bottom: buttonButtom + 'px', right: buttonRight + 'px' }"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    @touchstart="handleTouchStart"
    @click="goScan"
  >
    <uv-icon v-if="!show_add" name="reload" size="100rpx" color="#fff"></uv-icon>
    <uv-icon v-if="show_add" name="plus" size="70rpx" color="#fff"></uv-icon>
  </view>
</template>

<script>
export default {
  name: 'MoveBtn',
  props: {
    show_add: {
      type: Boolean,
      default: false // 默认值
    }
  },
  data() {
    return {
      buttonButtom: 180,
      buttonRight: 10,
      startX: 0,
      startY: 0,
      isDragging: false
    }
  },
  methods: {
    handleTouchStart(event) {
      this.startX = event.touches[0].pageX;
      this.startY = event.touches[0].pageY;
      this.isDragging = true;
    },
    handleTouchMove(event) {
      if (this.isDragging) {
        const moveX = event.touches[0].pageX;
        const moveY = event.touches[0].pageY;
        this.buttonButtom += this.startY - moveY;
        this.buttonRight += this.startX - moveX;
        this.startX = moveX;
        this.startY = moveY;
      }
    },
    handleTouchEnd() {
      this.isDragging = false;
    },
    goScan() {
      this.$emit("goScan");
    }
  }
}
</script>

<style>
.float-button {
  position: fixed;
  width: 120rpx;
  height: 120rpx;
  background-color: #003f98;
  color: white;
  text-align: center;
  line-height: 120rpx;
  border-radius: 50%;
  user-select: none;
  touch-action: none;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5);
}
</style>