Skip to content

Commit 7b44765

Browse files
RJQingHuanRJQingHuan
authored
feat: ✨ fab组件添加gap属性 (#366)
* feat: ✨ fab组件添加gap属性 * fix: 修复gap为空时报错的问题
1 parent 74c90be commit 7b44765

3 files changed

Lines changed: 32 additions & 21 deletions

File tree

‎docs/component/fab.md‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
如果存在用户手动点击 `fab` 以外某个地方如按钮滑出 `fab` 的场景，则需要在点击的元素（在这里是按钮）加上 `click.stop=""` 阻止事件冒泡到根元素上，避免触发 `closeOutside`把要手动打开的 `fab` 关闭了。
1111
:::
1212

13-
1413
## 基本用法
14+
1515
通过`type`设置悬浮按钮触发器的类型，`position`设置悬浮按钮触发器的位置，`direction`设置动作按钮的打开方向，`disabled`设置悬浮按钮是否禁用。
1616

1717
```html
@@ -31,6 +31,7 @@
3131
</wd-button>
3232
</wd-fab>
3333
```
34+
3435
```ts
3536
import { useToast } from '@/uni_modules/wot-design-uni'
3637
const { show: showToast } = useToast()
@@ -39,6 +40,7 @@ const position = ref<'left-top' | 'right-top' | 'left-bottom' | 'right-bottom'>(
3940
const direction = ref<'top' | 'right' | 'bottom' | 'left'>('top')
4041
const disabled = ref<boolean>(false)
4142
```
43+
4244
```scss
4345
:deep(.custom-button) {
4446
min-width: auto !important;
@@ -58,15 +60,18 @@ const disabled = ref<boolean>(false)
5860
## 动作菜单展开/收起
5961

6062
通过`v-model:active`控制动作按钮菜单的展开/收起
61-
```html
63+
64+
```html
6265
<wd-fab v-model:active="active">
6366
```
67+
6468
```ts
6569
const active = ref<boolean>(false)
6670

6771
```
6872

6973
## 可拖动按钮
74+
7075
```html
7176
<wd-fab :draggable="true">
7277
```
@@ -77,18 +82,19 @@ const active = ref<boolean>(false)
7782

7883
## Attributes
7984

80-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
81-
| -------------- | ---------------------- | ------------ | ----------------------------------------------------------------------------------------- | -------------- | ---------------- |
82-
| v-model:active | 是否激活 | boolean | - | false | 0.1.57 |
83-
| type | 类型 | FabType | 'primary' &#124; 'success' &#124; 'info' &#124; 'warning' &#124; 'error' &#124; 'default' | 'primary' | 0.1.57 |
84-
| position | 悬浮按钮位置 | FabPosition | 'left-top' &#124; 'right-top' &#124; 'left-bottom' &#124; 'right-bottom' | 'right-bottom' | 0.1.57 |
85-
| draggable | 按钮能否拖动 | boolean | | false | 1.2.19 |
86-
| direction | 悬浮按钮菜单弹出方向 | FabDirection | 'top' &#124; 'right' &#124; 'bottom' &#124; 'left' | 'top' | 0.1.57 |
87-
| disabled | 是否禁用 | boolean | - | false | 0.1.57 |
88-
| inactiveIcon | 悬浮按钮未展开时的图标 | string | - | 'add' | 0.1.57 |
89-
| activeIcon | 悬浮按钮展开时的图标 | string | - | 'close' | 0.1.57 |
90-
| zIndex | 自定义悬浮按钮层级 | number | - | 99 | 0.1.57 |
91-
| customStyle | 自定义样式 | string | - | '' | 0.1.57 |
85+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
86+
| -------------- | ---------------------------------- | ------------ | ----------------------------------------------------------------------------------------- | ---------------------------------------------- | ---------------- |
87+
| v-model:active | 是否激活 | boolean | - | false | 0.1.57 |
88+
| type | 类型 | FabType | 'primary' &#124; 'success' &#124; 'info' &#124; 'warning' &#124; 'error' &#124; 'default' | 'primary' | 0.1.57 |
89+
| position | 悬浮按钮位置 | FabPosition | 'left-top' &#124; 'right-top' &#124; 'left-bottom' &#124; 'right-bottom' | 'right-bottom' | 0.1.57 |
90+
| draggable | 按钮能否拖动 | boolean | | false | 1.2.19 |
91+
| direction | 悬浮按钮菜单弹出方向 | FabDirection | 'top' &#124; 'right' &#124; 'bottom' &#124; 'left' | 'top' | 0.1.57 |
92+
| disabled | 是否禁用 | boolean | - | false | 0.1.57 |
93+
| inactiveIcon | 悬浮按钮未展开时的图标 | string | - | 'add' | 0.1.57 |
94+
| activeIcon | 悬浮按钮展开时的图标 | string | - | 'close' | 0.1.57 |
95+
| zIndex | 自定义悬浮按钮层级 | number | - | 99 | 0.1.57 |
96+
| gap | 自定义悬浮按钮与可视区域边缘的间距 | FabGap | - | \{ top: 16, left: 16, right: 16, bottom: 16 \} | $LOWEST_VERSION$ |
97+
| customStyle | 自定义样式 | string | - | '' | 0.1.57 |
9298

9399
## 外部样式类
94100

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
22
import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
3+
import type { PropType } from 'vue'
34

45
export type FabType = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'
56
export type FabPosition = 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom'
67
export type FabDirection = 'top' | 'right' | 'bottom' | 'left'
7-
8+
export type FabGap = Partial<Record<FabDirection, number>>
89
export const fabProps = {
910
...baseProps,
1011
/**
@@ -42,7 +43,11 @@ export const fabProps = {
4243
/**
4344
* 是否可拖动
4445
*/
45-
draggable: makeBooleanProp(false)
46+
draggable: makeBooleanProp(false),
47+
gap: {
48+
type: Object as PropType<FabGap>,
49+
default: () => ({})
50+
}
4651
}
4752

4853
export type FabProps = ExtractPropTypes<typeof fabProps>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -96,16 +96,16 @@ const bounding = reactive({
9696
maxTop: 0,
9797
maxLeft: 0
9898
})
99-
const fabGap: number = 16 // fab默认与边缘的间距
10099
101100
function getBounding() {
102101
const sysInfo = uni.getSystemInfoSync()
102+
const { top = 16, left = 16, right = 16, bottom = 16 } = props.gap
103103
screen.width = sysInfo.windowWidth
104104
screen.height = isH5 ? sysInfo.windowTop + sysInfo.windowHeight : sysInfo.windowHeight
105-
bounding.minTop = isH5 ? sysInfo.windowTop + fabGap : fabGap
106-
bounding.minLeft = fabGap
107-
bounding.maxLeft = screen.width - fabSize.value - fabGap
108-
bounding.maxTop = screen.height - fabSize.value - fabGap
105+
bounding.minTop = isH5 ? sysInfo.windowTop + top : top
106+
bounding.minLeft = left
107+
bounding.maxLeft = screen.width - fabSize.value - right
108+
bounding.maxTop = screen.height - fabSize.value - bottom
109109
}
110110
111111
function initPosition() {

0 commit comments

Comments
 (0)