feat: ✨ 新增 Fab 悬浮动作按钮组件

Moonofweisheng · Nov 17, 2023 · 3c526fe · 3c526fe
1 parent 9e30f26
commit 3c526fe
Show file tree

Hide file tree

Showing 16 changed files with 524 additions and 11 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -1,7 +1,7 @@
 /*
  * @Author: weisheng
  * @Date: 2023-07-27 10:26:09
- * @LastEditTime: 2023-11-06 20:48:43
+ * @LastEditTime: 2023-11-17 13:25:10
  * @LastEditors: weisheng
  * @Description: 
  * @FilePath: \wot-design-uni\docs\.vitepress\config.ts
@@ -177,6 +177,9 @@ export default defineConfig({
             }, {
               link: "/component/transition",
               text: "Transition 动画"
+            }, {
+              link: "/component/fab",
+              text: "Fab 悬浮按钮"
             }
           ]
         },

diff --git a/docs/component/drop-menu.md b/docs/component/drop-menu.md
@@ -10,7 +10,7 @@
 
 `options` 属性是一个一维对象数组，数组项的数据结构为：label（选项文本），value（选项值），tip（选项说明）。
 
-因为`uni-app`组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 `dropmenu` ，建议使用组件库的 `useQueue` hook（会关闭所有 dropmenu、popover、toast、swipeAction），在页面的根元素上监听点击事件的冒泡。
+因为`uni-app`组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 `dropmenu` ，建议使用组件库的 `useQueue` hook（会关闭所有 dropmenu、popover、toast、swipeAction、fab），在页面的根元素上监听点击事件的冒泡。
 
 :::warning
 如果存在用户手动点击 `dropmenu` 以外某个地方如按钮弹出 `dropmenu` 的场景，则需要在点击的元素（在这里上按钮）加上 @click 阻止事件冒泡到根元素上，避免触发 `closeOutside` 把要手动打开的 `dropmenu` 关闭了。

diff --git a/docs/component/fab.md b/docs/component/fab.md
@@ -0,0 +1,86 @@
+<frame/>
+
+# Fab 悬浮按钮
+
+悬浮动作按钮组件，按下可显示一组动作按钮。
+
+因为`uni-app`组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 `fab` ，建议使用组件库的 `useQueue` hook（会关闭所有 dropmenu、popover、toast、swipeAction、fab），在页面的根元素上监听点击事件的冒泡。
+
+:::warning
+如果存在用户手动点击 `fab` 以外某个地方如按钮滑出 `fab` 的场景，则需要在点击的元素（在这里是按钮）加上 `click.stop=""` 阻止事件冒泡到根元素上，避免触发 `closeOutside`把要手动打开的 `fab` 关闭了。
+:::
+
+
+## 基本用法
+通过`type`设置悬浮按钮触发器的类型，`position`设置悬浮按钮触发器的位置，`direction`设置动作按钮的打开方向，`disabled`设置悬浮按钮是否禁用。
+
+```html
+<wd-fab :disabled="disabled" :type="type" :position="position" :direction="direction">
+  <wd-button @click="showToast('一键三连')" :disabled="disabled" custom-class="custom-button" type="primary" round>
+    <wd-icon name="github-filled" size="22px"></wd-icon>
+  </wd-button>
+  <wd-button @click="showToast('我要收藏')" :disabled="disabled" custom-class="custom-button" type="success" round>
+    <wd-icon name="star" size="22px"></wd-icon>
+  </wd-button>
+
+  <wd-button @click="showToast('我要投币')" :disabled="disabled" custom-class="custom-button" type="error" round>
+    <wd-icon name="money-circle" size="22px"></wd-icon>
+  </wd-button>
+  <wd-button @click="showToast('我要点赞')" :disabled="disabled" custom-class="custom-button" type="warning" round>
+    <wd-icon name="thumb-up" size="22px"></wd-icon>
+  </wd-button>
+</wd-fab>
+```
+```ts
+import { useToast } from '@/uni_modules/wot-design-uni'
+const { show: showToast } = useToast()
+const type = ref<'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'>('primary')
+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)
+```
+```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;
+  }
+```
+
+## 动作菜单展开/收起
+
+通过`v-model:active`控制动作按钮菜单的展开/收起
+```html 
+<wd-fab v-model:active="active">
+```
+```ts
+const active = ref<boolean>(false)
+
+```
+## 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   |
+
+## 外部样式类
+
+| 类名         | 说明         | 最低版本 |
+| ------------ | ------------ | -------- |
+| custom-class | 自定义样式类 | 0.1.57   |
diff --git a/docs/component/popover.md b/docs/component/popover.md
@@ -8,7 +8,7 @@
 
 Popover 的属性与 [Tooltip](/component/tooltip.html) 很类似，因此对于重复属性，请参考 [Tooltip](/component/tooltip.html) 的文档，在此文档中不做详尽解释。
 
-因为`uni-app`组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 `popover` ，建议使用组件库的 `useQueue` hook（会关闭所有 dropmenu、popover、toast、swipeAction），在页面的根元素上监听点击事件的冒泡。
+因为`uni-app`组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 `popover` ，建议使用组件库的 `useQueue` hook（会关闭所有 dropmenu、popover、toast、swipeAction、fab），在页面的根元素上监听点击事件的冒泡。
 
 :::warning
 如果存在用户手动点击 `popover` 以外某个地方如按钮弹出 `popover` 的场景，则需要在点击的元素（在这里上按钮）加上 click 阻止事件冒泡到根元素上，避免触发 `closeOutside` 把要手动打开的 `popover` 关闭了。

diff --git a/docs/component/swipe-action.md b/docs/component/swipe-action.md
@@ -12,7 +12,7 @@
 
 `wd-swipe-action`分为三部分：`自定义左按钮内容`、`自定义内容`、`自定义右按钮内容`。自定义按钮内容需要设置`slot`开启，自定义内容为默认插槽，无需手动开启。
 
-因为`uni-app`组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 `swipeAction` ，建议使用组件库的 `useQueue` hook（会关闭所有 dropmenu、popover、toast、swipeAction），在页面的根元素上监听点击事件的冒泡。
+因为`uni-app`组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 `swipeAction` ，建议使用组件库的 `useQueue` hook（会关闭所有 dropmenu、popover、toast、swipeAction、fab），在页面的根元素上监听点击事件的冒泡。
 
 :::warning
 如果存在用户手动点击 `swipeAction` 以外某个地方如按钮滑出 `swipeAction` 的场景，则需要在点击的元素（在这里上按钮）加上 @click 阻止事件冒泡到根元素上，避免触发 `closeOutside`把要手动打开的 `swipeAction` 关闭了。

diff --git a/docs/component/tooltip.md b/docs/component/tooltip.md
@@ -20,7 +20,7 @@
 
 如 `placement="left-end"`，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。
 
-因为`uni-app`组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 `tooltip` ，建议使用组件库的 `useQueue` hook（会关闭所有 dropmenu、popover、toast、swipeAction），在页面的根元素上监听点击事件的冒泡。
+因为`uni-app`组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 `tooltip` ，建议使用组件库的 `useQueue` hook（会关闭所有 dropmenu、popover、toast、swipeAction、fab），在页面的根元素上监听点击事件的冒泡。
 
 :::warning
 如果存在用户手动点击 `tooltip` 以外某个地方如按钮滑出 `tooltip` 的场景，则需要在点击的元素（在这里上按钮）加上 click 阻止事件冒泡到根元素上，避免触发 `closeOutside`把要手动打开的 `tooltip` 关闭了。

diff --git a/src/pages.json b/src/pages.json
@@ -671,6 +671,16 @@
         },
         "navigationBarTitleText": "Sidebar 自定义图标"
       }
+    },
+    {
+      "path": "pages/fab/Index",
+      "name": "fab",
+      "style": {
+        "mp-alipay": {
+          "allowsBounceVertical": "NO"
+        },
+        "navigationBarTitleText": "Fab 悬浮按钮"
+      }
     }
   ],
   // "tabBar": {

diff --git a/src/pages/fab/Index.vue b/src/pages/fab/Index.vue
@@ -0,0 +1,89 @@
+<template>
+  <wd-toast />
+  <view class="fab" @click="closeOutside">
+    <page-wraper>
+      <demo-block title="悬浮按钮主题色">
+        <wd-radio-group v-model="type" inline shape="dot">
+          <wd-radio value="primary" custom-class="custom-radio">主要按钮</wd-radio>
+          <wd-radio value="success" custom-class="custom-radio">成功按钮</wd-radio>
+          <wd-radio value="warning" custom-class="custom-radio">警告按钮</wd-radio>
+          <wd-radio value="error" custom-class="custom-radio">危险按钮</wd-radio>
+          <wd-radio value="info" custom-class="custom-radio">信息按钮</wd-radio>
+        </wd-radio-group>
+      </demo-block>
+      <demo-block title="悬浮按钮位置">
+        <wd-radio-group v-model="position" inline shape="dot">
+          <wd-radio value="left-top" custom-class="custom-radio">左上</wd-radio>
+          <wd-radio value="right-top" custom-class="custom-radio">右上</wd-radio>
+          <wd-radio value="left-bottom" custom-class="custom-radio">左下</wd-radio>
+          <wd-radio value="right-bottom" custom-class="custom-radio">右下</wd-radio>
+        </wd-radio-group>
+      </demo-block>
+      <demo-block title="菜单弹出方向">
+        <wd-radio-group v-model="direction" inline shape="dot">
+          <wd-radio value="top" custom-class="custom-radio">向上</wd-radio>
+          <wd-radio value="bottom" custom-class="custom-radio">向下</wd-radio>
+          <wd-radio value="right" custom-class="custom-radio">向右</wd-radio>
+          <wd-radio value="left" custom-class="custom-radio">向左</wd-radio>
+        </wd-radio-group>
+      </demo-block>
+      <demo-block title="禁用">
+        <view @click.stop="">
+          <wd-switch v-model="disabled" 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-button @click="showToast('一键三连')" :disabled="disabled" custom-class="custom-button" type="primary" round>
+          <wd-icon name="github-filled" size="22px"></wd-icon>
+        </wd-button>
+        <wd-button @click="showToast('我要收藏')" :disabled="disabled" custom-class="custom-button" type="success" round>
+          <wd-icon name="star" size="22px"></wd-icon>
+        </wd-button>
+
+        <wd-button @click="showToast('我要投币')" :disabled="disabled" custom-class="custom-button" type="error" round>
+          <wd-icon name="money-circle" size="22px"></wd-icon>
+        </wd-button>
+        <wd-button @click="showToast('我要点赞')" :disabled="disabled" custom-class="custom-button" type="warning" round>
+          <wd-icon name="thumb-up" size="22px"></wd-icon>
+        </wd-button>
+      </wd-fab>
+    </page-wraper>
+  </view>
+</template>
+<script lang="ts" setup>
+import { useQueue, useToast } from '@/uni_modules/wot-design-uni'
+import { ref } from 'vue'
+const { show: showToast } = useToast()
+const active = ref<boolean>(false)
+const type = ref<'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'>('primary')
+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 { closeOutside } = useQueue()
+</script>
+<style lang="scss" scoped>
+.fab {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  :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;
+  }
+}
+</style>
diff --git a/src/pages/index/Index.vue b/src/pages/index/Index.vue
@@ -73,6 +73,10 @@ const list = ref([
       {
         id: 'transition',
         name: 'Transition 动画'
+      },
+      {
+        id: 'fab',
+        name: 'Fab 悬浮按钮'
       }
     ]
   },

diff --git a/src/pages/transition/Index.vue b/src/pages/transition/Index.vue
@@ -25,6 +25,7 @@
 
       <wd-transition
         :show="customShow"
+        name=""
         :duration="{ enter: 700, leave: 1000 }"
         enter-class="custom-enter"
         enter-active-class="custom-enter-active"

diff --git a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
@@ -834,4 +834,13 @@ $-sidebar-border-radius: var(--wd-sidebar-border-radius, 8px);
 $-sidebar-font-size: var(--wd-sidebar-font-size, 16px);
 $-sidebar-icon-size: var(--wd-sidebar-icon-size, 20px);
 $-sidebar-active-border-width: var(--wd-sidebar-active-border-width, 4px);
-$-sidebar-active-border-height: var(--wd-sidebar-active-border-height, 16px);
+$-sidebar-active-border-height: var(--wd-sidebar-active-border-height, 16px);
+
+// fab
+$-fab-trigger-height: var(--wd-fab-trigger-height, 56px);
+$-fab-trigger-width: var(--wd-fab-trigger-width, 56px);
+$-fab-actions-padding: var(--wd-actions-padding, 12px);
+$-fab-top: var(--wd-fab-top, 16px);
+$-fab-left: var(--wd-fab-left, 16px);
+$-fab-right: var(--wd-fab-right, 16px);
+$-fab-bottom: var(--wd-fab-bottom, 16px);