From 6f12aa4b04477a2b1f8535e272699333ceb0b9f6 Mon Sep 17 00:00:00 2001 From: TL Date: Tue, 11 Mar 2025 11:28:04 +0800 Subject: [PATCH] feat: extend wd-fab component with 4 new positions and update docs - add 'left-center', 'right-center', 'top-center', 'bottom-center' to fab position - update example to include all 8 positions - enhance docs to reflect new position options --- docs/component/fab.md | 37 ++++++++------ src/pages/fab/Index.vue | 8 +++- .../wot-design-uni/components/wd-fab/types.ts | 4 +- .../components/wd-fab/wd-fab.vue | 48 ++++++++++++++----- 4 files changed, 67 insertions(+), 30 deletions(-) diff --git a/docs/component/fab.md b/docs/component/fab.md index 63a779f8..554b815c 100644 --- a/docs/component/fab.md +++ b/docs/component/fab.md @@ -36,7 +36,14 @@ 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 position = ref<'left-top' + | 'right-top' + | 'left-bottom' + | 'right-bottom' + | 'left-center' + | 'right-center' + | 'top-center' + | 'bottom-center'>('left-bottom') const direction = ref<'top' | 'right' | 'bottom' | 'left'>('top') const disabled = ref(false) ``` @@ -100,20 +107,20 @@ const handleClick = () => { ## Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -| -------------- | ----------------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------- | ---------------------------------------------- | ---------------- | -| v-model:active | 是否激活 | boolean | - | false | 0.1.57 | -| type | 类型 | FabType | 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default' | 'primary' | 0.1.57 | -| position | 悬浮按钮位置 | FabPosition | 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | 'right-bottom' | 0.1.57 | -| draggable | 按钮能否拖动 | boolean | | false | 1.2.19 | -| direction | 悬浮按钮菜单弹出方向 | FabDirection | 'top' | 'right' | 'bottom' | '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 | 1.3.11 | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| -------------- | ----------------------------------------------------- | ------------ |-------------------------------------------------------------------------------------------------------------------------------------------| ---------------------------------------------- | ---------------- | +| v-model:active | 是否激活 | boolean | - | false | 0.1.57 | +| type | 类型 | FabType | 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default' | 'primary' | 0.1.57 | +| position | 悬浮按钮位置 | FabPosition | 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | left-center | right-center | top-center | bottom-center | 'right-bottom' | 0.1.57 | +| draggable | 按钮能否拖动 | boolean | | false | 1.2.19 | +| direction | 悬浮按钮菜单弹出方向 | FabDirection | 'top' | 'right' | 'bottom' | '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 | 1.3.11 | ## Events diff --git a/src/pages/fab/Index.vue b/src/pages/fab/Index.vue index 35560ccb..d9691792 100644 --- a/src/pages/fab/Index.vue +++ b/src/pages/fab/Index.vue @@ -15,6 +15,10 @@ 左上 右上 + 左中 + 右中 + 上中 + 下中 左下 右下 @@ -88,7 +92,9 @@ import { ref } from 'vue' const { show: showToast } = useToast() const active = ref(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 position = ref<'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | 'left-center' | 'right-center' | 'top-center' | 'bottom-center'>( + 'left-bottom' +) const direction = ref<'top' | 'right' | 'bottom' | 'left'>('top') const disabled = ref(false) const draggable = ref(false) diff --git a/src/uni_modules/wot-design-uni/components/wd-fab/types.ts b/src/uni_modules/wot-design-uni/components/wd-fab/types.ts index a2d47aa8..269b1272 100644 --- a/src/uni_modules/wot-design-uni/components/wd-fab/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-fab/types.ts @@ -3,7 +3,7 @@ import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../c import type { PropType } from 'vue' export type FabType = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default' -export type FabPosition = 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' +export type FabPosition = 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | 'left-center' | 'right-center' | 'top-center' | 'bottom-center' export type FabDirection = 'top' | 'right' | 'bottom' | 'left' export type FabGap = Partial> export const fabProps = { @@ -17,7 +17,7 @@ export const fabProps = { */ type: makeStringProp('primary'), /** - * 悬浮按钮位置，可选值为 left-top right-top left-bottom right-bottom + * 悬浮按钮位置，可选值为 left-top right-top left-bottom right-bottom left-center right-center top-center bottom-center */ position: makeStringProp('right-bottom'), /** diff --git a/src/uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue b/src/uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue index 80128941..4cebe254 100644 --- a/src/uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue +++ b/src/uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue @@ -124,18 +124,42 @@ async function getBounding() { 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 + const centerY = (maxTop + minTop) / 2 + const centerX = (maxLeft + minLeft) / 2 + + switch (pos) { + case 'left-top': + top.value = minTop + left.value = minLeft + break + case 'right-top': + top.value = minTop + left.value = maxLeft + break + case 'left-bottom': + top.value = maxTop + left.value = minLeft + break + case 'right-bottom': + top.value = maxTop + left.value = maxLeft + break + case 'left-center': + top.value = centerY + left.value = minLeft + break + case 'right-center': + top.value = centerY + left.value = maxLeft + break + case 'top-center': + top.value = minTop + left.value = centerX + break + case 'bottom-center': + top.value = maxTop + left.value = centerX + break } }