feat: ✨ fab添加draggable属性 (#259)

* feat: ✨ fab添加draggable属性

* chore: 删除注释

* docs: update doc

docs/component/fab.md

@@ -65,19 +65,30 @@ const disabled = ref<boolean>(false)
 const active = ref<boolean>(false)
 
 ```
+
+## 可拖动按钮
+```html
+<wd-fab :draggable="true">
+```
+
+:::warning
+开启拖动后`direction`属性将失效，会根据拖动后的位置自动计算弹出方向。拖动完成后按钮将会自动吸边。
+:::
+
 ## Attributes
 
-| 参数           | 说明                   | 类型         | 可选值                                                                                    | 默认值         | 最低版本 |
-| -------------- | ---------------------- | ------------ | ----------------------------------------------------------------------------------------- | -------------- | -------- |
-| v-model:active | 是否激活               | boolean      | -                                                                                         | false          | 0.1.57   |
-| type           | 类型                   | FabType      | 'primary' &#124; 'success' &#124; 'info' &#124; 'warning' &#124; 'error' &#124; 'default' | 'primary'      | 0.1.57   |
-| position       | 悬浮按钮位置           | FabPosition  | 'left-top' &#124; 'right-top' &#124; 'left-bottom' &#124; 'right-bottom'                  | 'right-bottom' | 0.1.57   |
-| direction      | 悬浮按钮菜单弹出方向   | FabDirection | 'top' &#124; 'right' &#124; 'bottom' &#124; 'left'                                        | 'top'          | 0.1.57   |
-| disabled       | 是否禁用               | boolean      | -                                                                                         | false          | 0.1.57   |
-| inactiveIcon   | 悬浮按钮未展开时的图标 | string       | -                                                                                         | 'add'          | 0.1.57   |
-| activeIcon     | 悬浮按钮展开时的图标   | string       | -                                                                                         | 'close'        | 0.1.57   |
-| zIndex         | 自定义悬浮按钮层级     | number       | -                                                                                         | 99             | 0.1.57   |
-| customStyle    | 自定义样式             | string       | -                                                                                         | ''             | 0.1.57   |
+| 参数           | 说明                   | 类型         | 可选值                                                                                    | 默认值         | 最低版本         |
+| -------------- | ---------------------- | ------------ | ----------------------------------------------------------------------------------------- | -------------- | ---------------- |
+| v-model:active | 是否激活               | boolean      | -                                                                                         | false          | 0.1.57           |
+| type           | 类型                   | FabType      | 'primary' &#124; 'success' &#124; 'info' &#124; 'warning' &#124; 'error' &#124; 'default' | 'primary'      | 0.1.57           |
+| position       | 悬浮按钮位置           | FabPosition  | 'left-top' &#124; 'right-top' &#124; 'left-bottom' &#124; 'right-bottom'                  | 'right-bottom' | 0.1.57           |
+| draggable      | 按钮能否拖动           | boolean      |                                                                                           | false          | $LOWEST_VERSION$ |
+| direction      | 悬浮按钮菜单弹出方向   | FabDirection | 'top' &#124; 'right' &#124; 'bottom' &#124; 'left'                                        | 'top'          | 0.1.57           |
+| disabled       | 是否禁用               | boolean      | -                                                                                         | false          | 0.1.57           |
+| inactiveIcon   | 悬浮按钮未展开时的图标 | string       | -                                                                                         | 'add'          | 0.1.57           |
+| activeIcon     | 悬浮按钮展开时的图标   | string       | -                                                                                         | 'close'        | 0.1.57           |
+| zIndex         | 自定义悬浮按钮层级     | number       | -                                                                                         | 99             | 0.1.57           |
+| customStyle    | 自定义样式             | string       | -                                                                                         | ''             | 0.1.57           |
 
 ## 外部样式类
 

src/pages/fab/Index.vue

@@ -32,13 +32,18 @@
           <wd-switch v-model="disabled" size="22px" />
         </view>
       </demo-block>
+      <demo-block title="可拖动">
+        <view @click.stop="">
+          <wd-switch v-model="draggable" size="22px" />
+        </view>
+      </demo-block>
 
       <demo-block title="切换展示">
         <view @click.stop="">
           <wd-button type="primary" @click="active = !active" round>切换</wd-button>
         </view>
       </demo-block>
-      <wd-fab v-model:active="active" :disabled="disabled" :type="type" :position="position" :direction="direction">
+      <wd-fab v-model:active="active" :disabled="disabled" :type="type" :position="position" :direction="direction" :draggable="draggable">
         <wd-button @click="showToast('一键三连')" :disabled="disabled" custom-class="custom-button" type="primary" round>
           <wd-icon name="github-filled" size="22px"></wd-icon>
         </wd-button>
@@ -65,6 +70,7 @@ const type = ref<'primary' | 'success' | 'info' | 'warning' | 'error' | 'default
 const position = ref<'left-top' | 'right-top' | 'left-bottom' | 'right-bottom'>('left-bottom')
 const direction = ref<'top' | 'right' | 'bottom' | 'left'>('top')
 const disabled = ref<boolean>(false)
+const draggable = ref(false)
 const { closeOutside } = useQueue()
 </script>
 <style lang="scss" scoped>

src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss

@@ -822,10 +822,6 @@ $-sidebar-active-border-height: var(--wd-sidebar-active-border-height, 16px) !de
 $-fab-trigger-height: var(--wd-fab-trigger-height, 56px) !default;
 $-fab-trigger-width: var(--wd-fab-trigger-width, 56px) !default;
 $-fab-actions-padding: var(--wd-actions-padding, 12px) !default;
-$-fab-top: var(--wd-fab-top, 16px) !default;
-$-fab-left: var(--wd-fab-left, 16px) !default;
-$-fab-right: var(--wd-fab-right, 16px) !default;
-$-fab-bottom: var(--wd-fab-bottom, 16px) !default;
 
 
 /* count-down */
@@ -872,4 +868,4 @@ $-password-input-cursor-duration: var(--wd-password-input-cursor-duration, 1s);
 /* form-item */
 $-form-item-error-message-color: var(--wot-form-item-error-message-color, $-color-danger) !default;
 $-form-item-error-message-font-size: var(--wot-form-item-error-message-font-size, $-fs-secondary) !default;
-$-form-item-error-message-line-height: var(--wot-form-item-error-message-line-height, 24px) !default;
+$-form-item-error-message-line-height: var(--wot-form-item-error-message-line-height, 24px) !default;

src/uni_modules/wot-design-uni/components/common/util.ts

@@ -643,3 +643,8 @@ export const getPropByPath = (obj: any, path: string): any => {
  * @returns 如果值是Date类型，则返回true，否则返回false
  */
 export const isDate = (val: unknown): val is Date => Object.prototype.toString.call(val) === '[object Date]' && !Number.isNaN((val as Date).getTime())
+
+/**
+ * 判断环境是否是H5
+ */
+export const isH5 = process.env.UNI_PLATFORM === 'h5'

src/uni_modules/wot-design-uni/components/wd-fab/index.scss

@@ -9,7 +9,6 @@
   position: fixed;
   z-index: 99;
 
-
   @include edeep(trigger) {
     min-width: auto !important;
     box-sizing: border-box;
@@ -109,46 +108,9 @@
       }
     }
 
-
   }
 
   @include edeep(icon) {
     font-size: 20px;
   }
-
-  @include m(left-top) {
-    top: $-fab-top;
-    left: $-fab-left;
-    /* #ifdef H5 */
-    top: calc($-fab-top + var(--window-top));
-    left: calc($-fab-left + var(--window-left));
-    /* #endif */
-  }
-
-  @include m(right-top) {
-    top: $-fab-top;
-    right: $-fab-right;
-    /* #ifdef H5 */
-    top: calc($-fab-top + var(--window-top));
-    right: calc($-fab-right + var(--window-right));
-    /* #endif */
-  }
-
-  @include m(left-bottom) {
-    bottom: $-fab-bottom;
-    left: $-fab-left;
-    /* #ifdef H5 */
-    bottom: calc($-fab-bottom + var(--window-bottom));
-    left: calc($-fab-left + var(--window-left));
-    /* #endif */
-  }
-
-  @include m(right-bottom) {
-    bottom: $-fab-bottom;
-    right: $-fab-right;
-    /* #ifdef H5 */
-    bottom: calc($-fab-bottom + var(--window-bottom));
-    right: calc($-fab-right + var(--window-right));
-    /* #endif */
-  }
-}
+}

src/uni_modules/wot-design-uni/components/wd-fab/types.ts

@@ -38,7 +38,11 @@ export const fabProps = {
   /**
    * 自定义悬浮按钮层级
    */
-  zIndex: makeNumberProp(99)
+  zIndex: makeNumberProp(99),
+  /**
+   * 是否可拖动
+   */
+  draggable: makeBooleanProp(false)
 }
 
 export type FabProps = ExtractPropTypes<typeof fabProps>

src/uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue

@@ -1,16 +1,23 @@
 <template>
-  <view :class="`wd-fab wd-fab--${position} ${customClass}`" :style="rootStyle" @click.stop="">
+  <view
+    @touchmove.stop.prevent="handleTouchMove"
+    @touchstart="handleTouchStart"
+    @touchend="handleTouchEnd"
+    :class="`wd-fab ${customClass}`"
+    :style="rootStyle"
+    @click.stop=""
+  >
     <view @click.stop="">
       <wd-button @click="handleClick" custom-class="wd-fab__trigger" round :type="type" :disabled="disabled">
         <wd-icon custom-class="wd-fab__icon" :name="isActive ? activeIcon : inactiveIcon"></wd-icon>
       </wd-button>
     </view>
     <wd-transition
-      :enter-class="`wd-fab__transition-enter--${direction}`"
+      :enter-class="`wd-fab__transition-enter--${fabDirection}`"
       enter-active-class="wd-fab__transition-enter-active"
-      :leave-to-class="`wd-fab__transition-leave-to--${direction}`"
+      :leave-to-class="`wd-fab__transition-leave-to--${fabDirection}`"
       leave-active-class="wd-fab__transition-leave-active"
-      :custom-class="`wd-fab__actions wd-fab__actions--${direction}`"
+      :custom-class="`wd-fab__actions wd-fab__actions--${fabDirection}`"
       :show="isActive"
       :duration="300"
       name=""
@@ -33,10 +40,11 @@ export default {
 
 <script lang="ts" setup>
 import { type CSSProperties, computed, onBeforeMount, ref, watch, inject, getCurrentInstance, onBeforeUnmount } from 'vue'
-import { isDef, objToStyle } from '../common/util'
+import { isDef, isH5, objToStyle } from '../common/util'
 import { type Queue, queueKey } from '../composables/useQueue'
 import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
 import { fabProps, type FabExpose } from './types'
+import { onMounted, reactive } from 'vue'
 
 const props = defineProps(fabProps)
 const emit = defineEmits(['update:active'])
@@ -66,8 +74,115 @@ watch(
   }
 )
 
+const fabDirection = ref(props.direction)
+
+watch(
+  () => props.direction,
+  (direction) => (fabDirection.value = direction)
+)
+
+watch(
+  () => props.position,
+  () => initPosition()
+)
+
+const top = ref(0)
+const left = ref(0)
+const screen = reactive({ width: 0, height: 0 })
+const fabSize = ref(56)
+const bounding = reactive({
+  minTop: 0,
+  minLeft: 0,
+  maxTop: 0,
+  maxLeft: 0
+})
+
+function getBounding() {
+  const sysInfo = uni.getSystemInfoSync()
+  const gap = 16
+
+  screen.width = sysInfo.windowWidth
+  screen.height = isH5 ? sysInfo.windowTop + sysInfo.windowHeight : sysInfo.windowHeight
+
+  bounding.minTop = isH5 ? sysInfo.windowTop + gap : gap
+  bounding.minLeft = gap
+  bounding.maxLeft = screen.width - fabSize.value - gap
+  bounding.maxTop = screen.height - fabSize.value - gap
+}
+
+function initPosition() {
+  const pos = props.position
+  const { minLeft, minTop, maxLeft, maxTop } = bounding
+  if (pos === 'left-top') {
+    top.value = minTop
+    left.value = minLeft
+  } else if (pos === 'right-top') {
+    top.value = minTop
+    left.value = maxLeft
+  } else if (pos === 'left-bottom') {
+    top.value = maxTop
+    left.value = minLeft
+  } else if (pos === 'right-bottom') {
+    top.value = maxTop
+    left.value = maxLeft
+  }
+}
+
+onMounted(() => {
+  initPosition()
+})
+
+// 按下时坐标相对于元素的偏移量
+const touchOffset = reactive({ x: 0, y: 0 })
+const attractTransition = ref(false)
+function handleTouchStart(e: TouchEvent) {
+  if (props.draggable === false) return
+
+  const touch = e.touches[0]
+  touchOffset.x = touch.clientX - left.value
+  touchOffset.y = touch.clientY - top.value
+  attractTransition.value = false
+}
+
+function handleTouchMove(e: TouchEvent) {
+  if (props.draggable === false) return
+
+  const touch = e.touches[0]
+  const { minLeft, minTop, maxLeft, maxTop } = bounding
+  let x = touch.clientX - touchOffset.x
+  let y = touch.clientY - touchOffset.y
+
+  if (x < minLeft) x = minLeft
+  else if (x > maxLeft) x = maxLeft
+
+  if (y < minTop) y = minTop
+  else if (y > maxTop) y = maxTop
+
+  top.value = y
+  left.value = x
+}
+
+function handleTouchEnd() {
+  if (props.draggable === false) return
+
+  const screenCenterX = screen.width / 2
+  const fabCenterX = left.value + fabSize.value / 2
+  attractTransition.value = true
+  if (fabCenterX < screenCenterX) {
+    left.value = bounding.minLeft
+    fabDirection.value = 'right'
+  } else {
+    left.value = bounding.maxLeft
+    fabDirection.value = 'left'
+  }
+}
+
 const rootStyle = computed(() => {
-  const style: CSSProperties = {}
+  const style: CSSProperties = {
+    top: top.value + 'px',
+    left: left.value + 'px',
+    transition: attractTransition.value ? 'all ease 0.3s' : 'none'
+  }
   if (isDef(props.zIndex)) {
     style['z-index'] = props.zIndex
   }
@@ -75,6 +190,7 @@ const rootStyle = computed(() => {
 })
 
 onBeforeMount(() => {
+  getBounding()
   if (queue && queue.pushToQueue) {
     queue.pushToQueue(proxy)
   } else {