可移动区域组件 (c-movable-area)

可移动区域组件封装了可拖拽的交互区域，基于 uni-app 的 movable-area 和 movable-view 进行二次封装，常用于悬浮按钮、可拖拽元素等场景。

基本用法

<template>
  <view class="page">
    <!-- 默认浮动按钮 -->
    <c-movable-area></c-movable-area>
  </view>
</template>

自定义图标和颜色

<template>
  <view class="page">
    <c-movable-area 
      iconName="home" 
      iconColor="#ff0000" 
      backgroundColor="#000000"
    ></c-movable-area>
  </view>
</template>

自定义位置

<template>
  <view class="page">
    <c-movable-area
      :initialX="100"
      :initialY="150"
    ></c-movable-area>
  </view>
</template>

使用插槽自定义内容

<template>
  <view class="page">
    <c-movable-area @change="onPositionChange">
      <view class="custom-content">
        <text>可拖拽内容</text>
      </view>
    </c-movable-area>
  </view>
</template>

<script>
export default {
  methods: {
    onPositionChange(e) {
      console.log('当前位置：', e);
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-content {
  width: 120rpx;
  height: 120rpx;
  background-color: #2979FF;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 24rpx;
}
</style>

属性说明

属性名	类型	默认值	说明
iconName	String	"plus"	默认按钮图标名称
iconColor	String	"#fff"	默认按钮图标颜色
iconSize	Number	24	默认按钮图标大小
backgroundColor	String	"#007AFF"	默认按钮背景颜色
initialX	Number	250	初始X坐标位置
initialY	Number	250	初始Y坐标位置

事件说明

事件名	说明	回调参数
change	位置变化时触发	{x, y} - 当前位置的坐标

插槽

插槽名	说明
default	自定义内容插槽，不传入时显示默认浮动按钮

组件结构

组件内部由以下部分组成：

1. 一个固定定位的容器（movable-container），占满整个屏幕
2. 内部包含 movable-area，作为拖拽的活动区域
3. movable-area 内部有一个 movable-view，用于实现拖拽功能
4. 默认情况下，movable-view 内显示一个带有图标的圆形按钮
5. 通过默认插槽可以替换默认按钮，实现自定义内容

样式特点

• 容器使用固定定位（fixed），覆盖整个页面，z-index 为 999
• 容器本身不接收指针事件（pointer-events: none），避免影响页面交互
• 只有可拖拽部分接收指针事件（pointer-events: auto）
• 默认按钮样式：
  • 宽高为 100rpx 的圆形按钮（border-radius: 50%）
  • 使用 flex 布局居中显示图标
  • 添加了轻微阴影效果（box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2)）

注意事项

1. 组件默认使用固定定位，会显示在页面内容之上（z-index: 999）
2. 组件默认提供了一个带有 plus 图标的圆形按钮，如需自定义可以使用默认插槽替换
3. 组件内部通过 movable-view 实现拖拽功能，direction 属性设置为 all，允许全方向拖动
4. 移动区域为整个屏幕，可以根据需要通过 CSS 自定义内容样式
5. 使用 uView 的图标组件，使用前请确保项目中已引入 uView UI 库
6. 组件会记录并更新拖动后的位置，并通过 change 事件返回最新坐标