feat: ✨ Fab 悬浮按钮组件支持自定义触发器和控制能否展开 (#612)

✅ Closes: #512

Author: Moonofweisheng

docs/component/fab.md

@@ -42,59 +42,90 @@ const disabled = ref<boolean>(false)
 ```
 
 ```scss
-  :deep(.custom-button) {
-    min-width: auto !important;
-    box-sizing: border-box;
-    width: 32px !important;
-    height: 32px !important;
-    border-radius: 16px !important;
-    margin: 8rpx;
-  }
-
-  :deep(.custom-radio) {
-    height: 32px !important;
-    line-height: 32px !important;
-  }
+:deep(.custom-button) {
+  min-width: auto !important;
+  box-sizing: border-box;
+  width: 32px !important;
+  height: 32px !important;
+  border-radius: 16px !important;
+  margin: 8rpx;
+}
+
+:deep(.custom-radio) {
+  height: 32px !important;
+  line-height: 32px !important;
+}
 ```
 
 ## 动作菜单展开/收起
 
 通过`v-model:active`控制动作按钮菜单的展开/收起
 
 ```html
-<wd-fab v-model:active="active">
+<wd-fab v-model:active="active"></wd-fab>
 ```
 
 ```ts
 const active = ref<boolean>(false)
-
 ```
 
 ## 可拖动按钮
 
 ```html
-<wd-fab :draggable="true">
+<wd-fab :draggable="true"></wd-fab>
 ```
 
 :::warning
 开启拖动后`direction`属性将失效，会根据拖动后的位置自动计算弹出方向。拖动完成后按钮将会自动吸边。
 :::
 
+## 自定义触发器
+
+通过`trigger`插槽自定义触发器，`expandable`控制点击触发器是否展开/收起动作按钮菜单。
+
+
+```html
+<wd-fab position="left-bottom" :expandable="false">
+  <template #trigger>
+    <wd-button @click="handleClick" icon="share" type="error">分享给朋友</wd-button>
+  </template>
+</wd-fab>
+```
+```ts
+const handleClick = () => {
+  console.log('点击了')
+}
+
+```
+
 ## 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           |
-| draggable      | 按钮能否拖动                       | boolean      |                                                                                           | false                                          | 1.2.19           |
-| 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           |
-| gap            | 自定义悬浮按钮与可视区域边缘的间距 | FabGap       | -                                                                                         | \{ top: 16, left: 16, right: 16, bottom: 16 \} | 1.2.26 |
-| 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                                          | 1.2.19           |
+| 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           |
+| gap            | 自定义悬浮按钮与可视区域边缘的间距                    | FabGap       | -                                                                                         | \{ top: 16, left: 16, right: 16, bottom: 16 \} | 1.2.26           |
+| customStyle    | 自定义样式                                            | string       | -                                                                                         | ''                                             | 0.1.57           |
+| expandable     | 用于控制点击时是否展开菜单，设置为 false 时触发 click | boolean      | -                                                                                         | true                                           | $LOWEST_VERSION$ |
+
+## Events
+
+| 事件名称 | 说明                                         | 参数 | 最低版本         |
+| -------- | -------------------------------------------- | ---- | ---------------- |
+| click    | expandable 设置为 false 时，点击悬浮按钮触发 | —    | $LOWEST_VERSION$ |
+
+## Slot
+
+| name    | 说明                                                           | 最低版本         |
+| ------- | -------------------------------------------------------------- | ---------------- |
+| trigger | 触发器插槽，用于自定义点击按钮，使用此插槽时组件不会抛出 click | $LOWEST_VERSION$ |
 
 ## 外部样式类
 

src/pages/fab/Index.vue

@@ -43,7 +43,22 @@
           <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" :draggable="draggable">
+
+      <demo-block title="自定义触发器">
+        <view @click.stop="">
+          <wd-switch v-model="useTriggerSlot" size="22px" />
+        </view>
+      </demo-block>
+      <wd-fab
+        v-if="!useTriggerSlot"
+        v-model:active="active"
+        :disabled="disabled"
+        :type="type"
+        :position="position"
+        :direction="direction"
+        :draggable="draggable"
+        @click="showToast('我被点了')"
+      >
         <wd-button @click="showToast('一键三连')" :disabled="disabled" custom-class="custom-button" type="primary" round>
           <wd-icon name="github-filled" size="22px"></wd-icon>
         </wd-button>
@@ -58,6 +73,12 @@
           <wd-icon name="thumb-up" size="22px"></wd-icon>
         </wd-button>
       </wd-fab>
+
+      <wd-fab v-else position="left-bottom" :draggable="draggable" :expandable="false">
+        <template #trigger>
+          <wd-button @click="handleCustomClick" icon="share" type="error">分享给朋友</wd-button>
+        </template>
+      </wd-fab>
     </page-wraper>
   </view>
 </template>
@@ -70,14 +91,23 @@ 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 draggable = ref<boolean>(false)
+const useTriggerSlot = ref<boolean>(false)
+
 const { closeOutside } = useQueue()
+
+function handleCustomClick() {
+  showToast('分享给朋友')
+}
 </script>
 <style lang="scss" scoped>
 .fab {
   position: relative;
   height: 100%;
   width: 100%;
+  min-height: 100vh;
+  box-sizing: border-box;
+  padding-bottom: 88rpx;
   :deep(.custom-button) {
     min-width: auto !important;
     box-sizing: border-box;

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

@@ -47,7 +47,11 @@ export const fabProps = {
   gap: {
     type: Object as PropType<FabGap>,
     default: () => ({})
-  }
+  },
+  /**
+   * 用于控制点击时是否展开菜单
+   */
+  expandable: makeBooleanProp(true)
 }
 
 export type FabProps = ExtractPropTypes<typeof fabProps>

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

@@ -8,11 +8,13 @@
     @click.stop=""
   >
     <view @click.stop="" :style="{ visibility: inited ? 'visible' : 'hidden' }" id="trigger">
-      <wd-button @click="handleClick" custom-class="wd-fab__trigger" round :type="type" :disabled="disabled">
+      <slot name="trigger" v-if="$slots.trigger"></slot>
+      <wd-button v-else @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
+      v-if="expandable"
       :enter-class="`wd-fab__transition-enter--${fabDirection}`"
       enter-active-class="wd-fab__transition-enter-active"
       :leave-to-class="`wd-fab__transition-leave-to--${fabDirection}`"
@@ -48,9 +50,10 @@ import { type Queue, queueKey } from '../composables/useQueue'
 import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
 import { fabProps, type FabExpose } from './types'
 import { reactive } from 'vue'
+import { useRaf } from '../composables/useRaf'
 
 const props = defineProps(fabProps)
-const emit = defineEmits(['update:active'])
+const emit = defineEmits(['update:active', 'click'])
 const inited = ref<boolean>(false) // 是否初始化完成
 const isActive = ref<boolean>(false) // 是否激活状态
 const queue = inject<Queue | null>(queueKey, null)
@@ -92,7 +95,7 @@ watch(
 const top = ref<number>(0)
 const left = ref<number>(0)
 const screen = reactive({ width: 0, height: 0 })
-const fabSize = ref<number>(56)
+const fabSize = reactive({ width: 56, height: 56 })
 const bounding = reactive({
   minTop: 0,
   minLeft: 0,
@@ -104,7 +107,8 @@ async function getBounding() {
   const sysInfo = uni.getSystemInfoSync()
   try {
     const trigerInfo = await getRect('#trigger', false, proxy)
-    fabSize.value = trigerInfo.width || 56
+    fabSize.width = trigerInfo.width || 56
+    fabSize.height = trigerInfo.height || 56
   } catch (error) {
     console.log(error)
   }
@@ -114,8 +118,8 @@ async function getBounding() {
   screen.height = isH5 ? sysInfo.windowTop + sysInfo.windowHeight : sysInfo.windowHeight
   bounding.minTop = isH5 ? sysInfo.windowTop + top : top
   bounding.minLeft = left
-  bounding.maxLeft = screen.width - fabSize.value - right
-  bounding.maxTop = screen.height - fabSize.value - bottom
+  bounding.maxLeft = screen.width - fabSize.width - right
+  bounding.maxTop = screen.height - fabSize.height - bottom
 }
 
 function initPosition() {
@@ -170,7 +174,7 @@ function handleTouchEnd() {
   if (props.draggable === false) return
 
   const screenCenterX = screen.width / 2
-  const fabCenterX = left.value + fabSize.value / 2
+  const fabCenterX = left.value + fabSize.width / 2
   attractTransition.value = true
   if (fabCenterX < screenCenterX) {
     left.value = bounding.minLeft
@@ -200,11 +204,12 @@ onMounted(() => {
     pushToQueue(proxy)
   }
 
-  nextTick(async () => {
+  const { start } = useRaf(async () => {
     await getBounding()
     initPosition()
     inited.value = true
   })
+  start()
 })
 
 onBeforeUnmount(() => {
@@ -219,6 +224,10 @@ function handleClick() {
   if (props.disabled) {
     return
   }
+  if (!props.expandable) {
+    emit('click')
+    return
+  }
   isActive.value = !isActive.value
   emit('update:active', isActive.value)
 }