mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
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
This commit is contained in:
TL
不如摸鱼去
parent
496cb732b1
commit
6f12aa4b04
@ -36,7 +36,14 @@
|
|||||||
import { useToast } from '@/uni_modules/wot-design-uni'
|
import { useToast } from '@/uni_modules/wot-design-uni'
|
||||||
const { show: showToast } = useToast()
|
const { show: showToast } = useToast()
|
||||||
const type = ref<'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'>('primary')
|
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 direction = ref<'top' | 'right' | 'bottom' | 'left'>('top')
|
||||||
const disabled = ref<boolean>(false)
|
const disabled = ref<boolean>(false)
|
||||||
```
|
```
|
||||||
@ -100,20 +107,20 @@ const handleClick = () => {
|
|||||||
|
|
||||||
## Attributes
|
## Attributes
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||||
| -------------- | ----------------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------- | ---------------------------------------------- | ---------------- |
|
| -------------- | ----------------------------------------------------- | ------------ |-------------------------------------------------------------------------------------------------------------------------------------------| ---------------------------------------------- | ---------------- |
|
||||||
| v-model:active | 是否激活 | boolean | - | false | 0.1.57 |
|
| v-model:active | 是否激活 | boolean | - | false | 0.1.57 |
|
||||||
| type | 类型 | FabType | 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default' | 'primary' | 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 |
|
| 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 |
|
| draggable | 按钮能否拖动 | boolean | | false | 1.2.19 |
|
||||||
| direction | 悬浮按钮菜单弹出方向 | FabDirection | 'top' | 'right' | 'bottom' | 'left' | 'top' | 0.1.57 |
|
| direction | 悬浮按钮菜单弹出方向 | FabDirection | 'top' | 'right' | 'bottom' | 'left' | 'top' | 0.1.57 |
|
||||||
| disabled | 是否禁用 | boolean | - | false | 0.1.57 |
|
| disabled | 是否禁用 | boolean | - | false | 0.1.57 |
|
||||||
| inactiveIcon | 悬浮按钮未展开时的图标 | string | - | 'add' | 0.1.57 |
|
| inactiveIcon | 悬浮按钮未展开时的图标 | string | - | 'add' | 0.1.57 |
|
||||||
| activeIcon | 悬浮按钮展开时的图标 | string | - | 'close' | 0.1.57 |
|
| activeIcon | 悬浮按钮展开时的图标 | string | - | 'close' | 0.1.57 |
|
||||||
| zIndex | 自定义悬浮按钮层级 | number | - | 99 | 0.1.57 |
|
| zIndex | 自定义悬浮按钮层级 | number | - | 99 | 0.1.57 |
|
||||||
| gap | 自定义悬浮按钮与可视区域边缘的间距 | FabGap | - | \{ top: 16, left: 16, right: 16, bottom: 16 \} | 1.2.26 |
|
| gap | 自定义悬浮按钮与可视区域边缘的间距 | FabGap | - | \{ top: 16, left: 16, right: 16, bottom: 16 \} | 1.2.26 |
|
||||||
| customStyle | 自定义样式 | string | - | '' | 0.1.57 |
|
| customStyle | 自定义样式 | string | - | '' | 0.1.57 |
|
||||||
| expandable | 用于控制点击时是否展开菜单，设置为 false 时触发 click | boolean | - | true | 1.3.11 |
|
| expandable | 用于控制点击时是否展开菜单，设置为 false 时触发 click | boolean | - | true | 1.3.11 |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
|
|||||||
@ -15,6 +15,10 @@
|
|||||||
<wd-radio-group v-model="position" inline shape="dot">
|
<wd-radio-group v-model="position" inline shape="dot">
|
||||||
<wd-radio value="left-top" custom-class="custom-radio">左上</wd-radio>
|
<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="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="left-bottom" custom-class="custom-radio">左下</wd-radio>
|
||||||
<wd-radio value="right-bottom" custom-class="custom-radio">右下</wd-radio>
|
<wd-radio value="right-bottom" custom-class="custom-radio">右下</wd-radio>
|
||||||
</wd-radio-group>
|
</wd-radio-group>
|
||||||
@ -88,7 +92,9 @@ import { ref } from 'vue'
|
|||||||
const { show: showToast } = useToast()
|
const { show: showToast } = useToast()
|
||||||
const active = ref<boolean>(false)
|
const active = ref<boolean>(false)
|
||||||
const type = ref<'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'>('primary')
|
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 direction = ref<'top' | 'right' | 'bottom' | 'left'>('top')
|
||||||
const disabled = ref<boolean>(false)
|
const disabled = ref<boolean>(false)
|
||||||
const draggable = ref<boolean>(false)
|
const draggable = ref<boolean>(false)
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../c
|
|||||||
import type { PropType } from 'vue'
|
import type { PropType } from 'vue'
|
||||||
|
|
||||||
export type FabType = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'
|
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 FabDirection = 'top' | 'right' | 'bottom' | 'left'
|
||||||
export type FabGap = Partial<Record<FabDirection, number>>
|
export type FabGap = Partial<Record<FabDirection, number>>
|
||||||
export const fabProps = {
|
export const fabProps = {
|
||||||
@ -17,7 +17,7 @@ export const fabProps = {
|
|||||||
*/
|
*/
|
||||||
type: makeStringProp<FabType>('primary'),
|
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'),
|
position: makeStringProp<FabPosition>('right-bottom'),
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -124,18 +124,42 @@ async function getBounding() {
|
|||||||
function initPosition() {
|
function initPosition() {
|
||||||
const pos = props.position
|
const pos = props.position
|
||||||
const { minLeft, minTop, maxLeft, maxTop } = bounding
|
const { minLeft, minTop, maxLeft, maxTop } = bounding
|
||||||
if (pos === 'left-top') {
|
const centerY = (maxTop + minTop) / 2
|
||||||
top.value = minTop
|
const centerX = (maxLeft + minLeft) / 2
|
||||||
left.value = minLeft
|
|
||||||
} else if (pos === 'right-top') {
|
switch (pos) {
|
||||||
top.value = minTop
|
case 'left-top':
|
||||||
left.value = maxLeft
|
top.value = minTop
|
||||||
} else if (pos === 'left-bottom') {
|
left.value = minLeft
|
||||||
top.value = maxTop
|
break
|
||||||
left.value = minLeft
|
case 'right-top':
|
||||||
} else if (pos === 'right-bottom') {
|
top.value = minTop
|
||||||
top.value = maxTop
|
left.value = maxLeft
|
||||||
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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user