admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: extend wd-fab component with 4 new positions and update docs

Browse Source 
- 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
This commit is contained in:
TL 2025-03-11 11:28:04 +08:00 committed by 不如摸鱼去
parent 496cb732b1
commit 6f12aa4b04
4 changed files with 67 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
docs/component/fab.md
View File

@ -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<boolean>(false)
```
@ -100,20 +107,20 @@ const handleClick = () => {
## 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 |
| expandable | 用于控制点击时是否展开菜单，设置为 false 时触发 click | boolean | - | true | 1.3.11 |
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| -------------- | ----------------------------------------------------- | ------------ |-------------------------------------------------------------------------------------------------------------------------------------------| ---------------------------------------------- | ---------------- |
| 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' &#124; left-center &#124; right-center &#124; top-center &#124; bottom-center | '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 | 1.3.11 |
## Events

8
src/pages/fab/Index.vue
View File

@ -15,6 +15,10 @@
<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-center" custom-class="custom-radio">左中</wd-radio>
<wd-radio value="right-center" custom-class="custom-radio">右中</wd-radio>
<wd-radio value="top-center" custom-class="custom-radio">上中</wd-radio>
<wd-radio value="bottom-center" 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>
@ -88,7 +92,9 @@ 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 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<boolean>(false)
const draggable = ref<boolean>(false)

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

@ -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<Record<FabDirection, number>>
export const fabProps = {
@ -17,7 +17,7 @@ export const fabProps = {
*/
type: makeStringProp<FabType>('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<FabPosition>('right-bottom'),
/**

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

@ -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
}
}