MoveIcon 悬浮按钮

可拖动的悬浮按钮组件，支持自动停靠到屏幕边缘，常用于快捷操作入口。

基础用法

<template>
  <dr-move-icon @click="handleClick">
    <view class="custom-btn">
      <text>+</text>
    </view>
  </dr-move-icon>
</template>

<script setup>
const handleClick = () => {
  console.log('点击了悬浮按钮')
}
</script>

<style>
.custom-btn {
  width: 100%;
  height: 100%;
  background: #409eff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 48rpx;
}
</style>

自动停靠

默认开启自动停靠功能，拖动结束后会自动吸附到最近的屏幕边缘。

<template>
  <!-- 开启自动停靠（默认） -->
  <dr-move-icon docking />

  <!-- 关闭自动停靠 -->
  <dr-move-icon :docking="false" />
</template>

停靠方向

可以设置只停靠到左边、右边或两边都可以停靠。

<template>
  <!-- 两边都可停靠（默认） -->
  <dr-move-icon docking-side="both" />

  <!-- 只停靠左边 -->
  <dr-move-icon docking-side="left" />

  <!-- 只停靠右边 -->
  <dr-move-icon docking-side="right" />
</template>

初始位置

通过 bottom 和 right 属性设置悬浮按钮的初始位置。

<template>
  <!-- 距离底部 100px，距离右边 20px -->
  <dr-move-icon :bottom="100" :right="20" />
</template>

禁用拖动

<template>
  <dr-move-icon disabled @click="handleClick">
    <view class="btn">固定按钮</view>
  </dr-move-icon>
</template>

自定义尺寸

通过 width 和 height 属性设置按钮尺寸（单位：rpx）。

<template>
  <!-- 大尺寸按钮 -->
  <dr-move-icon :width="120" :height="120">
    <view class="large-btn">大</view>
  </dr-move-icon>

  <!-- 小尺寸按钮 -->
  <dr-move-icon :width="80" :height="80">
    <view class="small-btn">小</view>
  </dr-move-icon>
</template>

拖动事件

<template>
  <dr-move-icon
    @click="handleClick"
    @dragstart="handleDragStart"
    @dragend="handleDragEnd"
    @change="handleChange"
  >
    <view class="btn">拖我</view>
  </dr-move-icon>
</template>

<script setup>
const handleClick = () => {
  console.log('点击事件')
}

const handleDragStart = (e) => {
  console.log('开始拖动', e.x, e.y)
}

const handleDragEnd = (e) => {
  console.log('结束拖动', e.x, e.y)
}

const handleChange = (e) => {
  console.log('位置变化', e.x, e.y, e.source)
}
</script>

Ref 方法

通过 ref 可以调用组件方法。

<template>
  <dr-move-icon ref="moveIconRef">
    <view class="btn">按钮</view>
  </dr-move-icon>
  <button @click="reset">重置位置</button>
  <button @click="setPos">设置位置</button>
</template>

<script setup>
import { ref } from 'vue'

const moveIconRef = ref(null)

const reset = () => {
  // 重置到初始位置
  moveIconRef.value.resetPosition()
}

const setPos = () => {
  // 设置到指定位置
  moveIconRef.value.setPosition(100, 200)
}
</script>

API

Props

参数	说明	类型	默认值
disabled	是否禁用拖动	boolean	false
docking	是否自动停靠到边缘	boolean	true
docking-side	停靠方向	'both' | 'left' | 'right'	'both'
bottom	初始位置距离底部距离（px）	number	100
right	初始位置/停靠右边时的边距（px）	number	10
left	停靠左边时的边距（px）	number	10
width	按钮宽度（rpx）	number	100
height	按钮高度（rpx）	number	100
inertia	是否开启惯性	boolean	true
damping	阻尼系数，越大移动越快	number	20
friction	摩擦系数，越大滑动越快停止	number	2
out-of-bounds	是否允许超出边界	boolean	false
z-index	层级	number	5000
animation-duration	停靠动画时长（ms）	number	300

Events

事件名	说明	回调参数
click	点击按钮时触发	-
dragstart	开始拖动时触发	{ x: number, y: number }
dragend	结束拖动时触发	{ x: number, y: number }
change	位置变化时触发	{ x: number, y: number, source: string }

Methods

通过 ref 可以调用以下方法：

方法名	说明	参数
resetPosition	重置到初始位置	-
setPosition	设置到指定位置	(x: number, y: number)

Slots

名称	说明
default	自定义按钮内容

注意事项

1. 组件使用 movable-area 和 movable-view 实现，兼容 H5、微信小程序、App 等多端
2. 按钮内容需要通过插槽传入，组件提供默认的圆形按钮样式
3. bottom 和 right 属性使用 px 单位，width 和 height 使用 rpx 单位
4. 停靠动画使用 CSS transition 实现，在部分低版本设备上可能不够流畅
5. 如果页面有多个悬浮按钮，注意调整 z-index 避免层级冲突