Skip to content

Commit 6f12aa4

Browse files
TLMoonofweisheng
TL
authored and
Moonofweisheng
committed
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
1 parent 496cb73 commit 6f12aa4

4 files changed

Lines changed: 67 additions & 30 deletions

File tree

‎docs/component/fab.md‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,14 @@
3636
import { useToast } from '@/uni_modules/wot-design-uni'
3737
const { show: showToast } = useToast()
3838
const type = ref<'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'>('primary')
39-
const position = ref<'left-top' | 'right-top' | 'left-bottom' | 'right-bottom'>('left-bottom')
39+
const position = ref<'left-top'
40+
| 'right-top'
41+
| 'left-bottom'
42+
| 'right-bottom'
43+
| 'left-center'
44+
| 'right-center'
45+
| 'top-center'
46+
| 'bottom-center'>('left-bottom')
4047
const direction = ref<'top' | 'right' | 'bottom' | 'left'>('top')
4148
const disabled = ref<boolean>(false)
4249
```
@@ -100,20 +107,20 @@ const handleClick = () => {
100107

101108
## Attributes
102109

103-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
104-
| -------------- | ----------------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------- | ---------------------------------------------- | ---------------- |
105-
| v-model:active | 是否激活 | boolean | - | false | 0.1.57 |
106-
| type | 类型 | FabType | 'primary' &#124; 'success' &#124; 'info' &#124; 'warning' &#124; 'error' &#124; 'default' | 'primary' | 0.1.57 |
107-
| position | 悬浮按钮位置 | FabPosition | 'left-top' &#124; 'right-top' &#124; 'left-bottom' &#124; 'right-bottom' | 'right-bottom' | 0.1.57 |
108-
| draggable | 按钮能否拖动 | boolean | | false | 1.2.19 |
109-
| direction | 悬浮按钮菜单弹出方向 | FabDirection | 'top' &#124; 'right' &#124; 'bottom' &#124; 'left' | 'top' | 0.1.57 |
110-
| disabled | 是否禁用 | boolean | - | false | 0.1.57 |
111-
| inactiveIcon | 悬浮按钮未展开时的图标 | string | - | 'add' | 0.1.57 |
112-
| activeIcon | 悬浮按钮展开时的图标 | string | - | 'close' | 0.1.57 |
113-
| zIndex | 自定义悬浮按钮层级 | number | - | 99 | 0.1.57 |
114-
| gap | 自定义悬浮按钮与可视区域边缘的间距 | FabGap | - | \{ top: 16, left: 16, right: 16, bottom: 16 \} | 1.2.26 |
115-
| customStyle | 自定义样式 | string | - | '' | 0.1.57 |
116-
| expandable | 用于控制点击时是否展开菜单，设置为 false 时触发 click | boolean | - | true | 1.3.11 |
110+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
111+
| -------------- | ----------------------------------------------------- | ------------ |-------------------------------------------------------------------------------------------------------------------------------------------| ---------------------------------------------- | ---------------- |
112+
| v-model:active | 是否激活 | boolean | - | false | 0.1.57 |
113+
| type | 类型 | FabType | 'primary' &#124; 'success' &#124; 'info' &#124; 'warning' &#124; 'error' &#124; 'default' | 'primary' | 0.1.57 |
114+
| position | 悬浮按钮位置 | FabPosition | 'left-top' &#124; 'right-top' &#124; 'left-bottom' &#124; 'right-bottom' &#124; left-center &#124; right-center &#124; top-center &#124; bottom-center | 'right-bottom' | 0.1.57 |
115+
| draggable | 按钮能否拖动 | boolean | | false | 1.2.19 |
116+
| direction | 悬浮按钮菜单弹出方向 | FabDirection | 'top' &#124; 'right' &#124; 'bottom' &#124; 'left' | 'top' | 0.1.57 |
117+
| disabled | 是否禁用 | boolean | - | false | 0.1.57 |
118+
| inactiveIcon | 悬浮按钮未展开时的图标 | string | - | 'add' | 0.1.57 |
119+
| activeIcon | 悬浮按钮展开时的图标 | string | - | 'close' | 0.1.57 |
120+
| zIndex | 自定义悬浮按钮层级 | number | - | 99 | 0.1.57 |
121+
| gap | 自定义悬浮按钮与可视区域边缘的间距 | FabGap | - | \{ top: 16, left: 16, right: 16, bottom: 16 \} | 1.2.26 |
122+
| customStyle | 自定义样式 | string | - | '' | 0.1.57 |
123+
| expandable | 用于控制点击时是否展开菜单，设置为 false 时触发 click | boolean | - | true | 1.3.11 |
117124

118125
## Events
119126

‎src/pages/fab/Index.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
<wd-radio-group v-model="position" inline shape="dot">
1616
<wd-radio value="left-top" custom-class="custom-radio">左上</wd-radio>
1717
<wd-radio value="right-top" custom-class="custom-radio">右上</wd-radio>
18+
<wd-radio value="left-center" custom-class="custom-radio">左中</wd-radio>
19+
<wd-radio value="right-center" custom-class="custom-radio">右中</wd-radio>
20+
<wd-radio value="top-center" custom-class="custom-radio">上中</wd-radio>
21+
<wd-radio value="bottom-center" custom-class="custom-radio">下中</wd-radio>
1822
<wd-radio value="left-bottom" custom-class="custom-radio">左下</wd-radio>
1923
<wd-radio value="right-bottom" custom-class="custom-radio">右下</wd-radio>
2024
</wd-radio-group>
@@ -88,7 +92,9 @@ import { ref } from 'vue'
8892
const { show: showToast } = useToast()
8993
const active = ref<boolean>(false)
9094
const type = ref<'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'>('primary')
91-
const position = ref<'left-top' | 'right-top' | 'left-bottom' | 'right-bottom'>('left-bottom')
95+
const position = ref<'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | 'left-center' | 'right-center' | 'top-center' | 'bottom-center'>(
96+
'left-bottom'
97+
)
9298
const direction = ref<'top' | 'right' | 'bottom' | 'left'>('top')
9399
const disabled = ref<boolean>(false)
94100
const draggable = ref<boolean>(false)

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../c
33
import type { PropType } from 'vue'
44

55
export type FabType = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'
6-
export type FabPosition = 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom'
6+
export type FabPosition = 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | 'left-center' | 'right-center' | 'top-center' | 'bottom-center'
77
export type FabDirection = 'top' | 'right' | 'bottom' | 'left'
88
export type FabGap = Partial<Record<FabDirection, number>>
99
export const fabProps = {
@@ -17,7 +17,7 @@ export const fabProps = {
1717
*/
1818
type: makeStringProp<FabType>('primary'),
1919
/**
20-
* 悬浮按钮位置，可选值为 left-top right-top left-bottom right-bottom
20+
* 悬浮按钮位置，可选值为 left-top right-top left-bottom right-bottom left-center right-center top-center bottom-center
2121
*/
2222
position: makeStringProp<FabPosition>('right-bottom'),
2323
/**

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

Lines changed: 36 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -124,18 +124,42 @@ async function getBounding() {
124124
function initPosition() {
125125
const pos = props.position
126126
const { minLeft, minTop, maxLeft, maxTop } = bounding
127-
if (pos === 'left-top') {
128-
top.value = minTop
129-
left.value = minLeft
130-
} else if (pos === 'right-top') {
131-
top.value = minTop
132-
left.value = maxLeft
133-
} else if (pos === 'left-bottom') {
134-
top.value = maxTop
135-
left.value = minLeft
136-
} else if (pos === 'right-bottom') {
137-
top.value = maxTop
138-
left.value = maxLeft
127+
const centerY = (maxTop + minTop) / 2
128+
const centerX = (maxLeft + minLeft) / 2
129+
130+
switch (pos) {
131+
case 'left-top':
132+
top.value = minTop
133+
left.value = minLeft
134+
break
135+
case 'right-top':
136+
top.value = minTop
137+
left.value = maxLeft
138+
break
139+
case 'left-bottom':
140+
top.value = maxTop
141+
left.value = minLeft
142+
break
143+
case 'right-bottom':
144+
top.value = maxTop
145+
left.value = maxLeft
146+
break
147+
case 'left-center':
148+
top.value = centerY
149+
left.value = minLeft
150+
break
151+
case 'right-center':
152+
top.value = centerY
153+
left.value = maxLeft
154+
break
155+
case 'top-center':
156+
top.value = minTop
157+
left.value = centerX
158+
break
159+
case 'bottom-center':
160+
top.value = maxTop
161+
left.value = centerX
162+
break
139163
}
140164
}
141165

0 commit comments

Comments
 (0)