From 36bd9fe1de46da8be4dfdd891459bdb87f52961e Mon Sep 17 00:00:00 2001
From: Burt <1020103647@qq.com>
Date: Sun, 21 Jan 2024 04:22:45 +0800
Subject: [PATCH] feat: floating-bubble

---
 src/pages/demo/demo/floating-bubble.vue | 82 +++++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 src/pages/demo/demo/floating-bubble.vue

diff --git a/src/pages/demo/demo/floating-bubble.vue b/src/pages/demo/demo/floating-bubble.vue
new file mode 100644
index 0000000..360e635
--- /dev/null
+++ b/src/pages/demo/demo/floating-bubble.vue
@@ -0,0 +1,82 @@
+<template>
+  <view>
+    <movable-area class="movable-area">
+      <movable-view
+        :style="`--size:${ballSize}px`"
+        class="movable-view"
+        direction="all"
+        :x="x"
+        :y="y"
+        @change="onChange"
+        @touchend.prevent="onTouchEnd"
+      >
+        <view class="w-full h-full rounded-full bg-green-400"></view>
+      </movable-view>
+    </movable-area>
+    <view>页面其他元素</view>
+    <view>可以正常触发点击事件吗？答案是可以的</view>
+    <button @click="onClick">按钮</button>
+    <view>{{ x }}</view>
+    <view>{{ y }}</view>
+    <view @click="onSet">点击设置</view>
+  </view>
+</template>
+
+<script lang="ts" setup name="FloatingBubble">
+const { windowHeight, windowWidth } = uni.getSystemInfoSync()
+console.log(uni.getSystemInfoSync())
+
+const ballSize = 60
+const x = ref(windowWidth - ballSize) // 靠右侧
+const y = ref(windowHeight - ballSize - 20) // 距离底部20px
+
+const middleX = (windowWidth - ballSize) / 2
+const onChange: UniHelper.MovableViewOnChange = (e) => {
+  // console.log(e.detail)
+  const { x: _x, y: _y } = e.detail
+  x.value = _x
+  y.value = _y
+}
+// TODO: 期望最终落点不靠左右两边时，会自动回到两边，有一定的动画效果
+const onTouchEnd = (e) => {
+  console.log(e)
+  console.log('onTouchEnd')
+  // TODO：为啥这里设置的不生效了，原生不会移动到设置的地方，onSet里面可以。这里直接执行onSet也不行
+  nextTick(() => {
+    console.log(x.value, middleX)
+    if (x.value < middleX) {
+      x.value = 0
+    } else {
+      x.value = windowWidth - ballSize
+    }
+  })
+}
+
+const onClick = () => {
+  uni.showToast({
+    title: 'yes',
+    icon: 'none',
+  })
+}
+const onSet = () => {
+  x.value = 100
+  y.value = 100
+}
+</script>
+
+<style lang="scss">
+.movable-area {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  width: 100%;
+  height: 100%;
+  pointer-events: none; // 设置area元素不可点击，则事件便会下移至页面下层元素
+  .movable-view {
+    width: var(--size);
+    height: var(--size);
+    pointer-events: auto; // 必须设置，否则无法点击
+  }
+}
+</style>