mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
feat: ✨ fab组件添加gap属性 (#366)
* feat: ✨ fab组件添加gap属性
* fix: 修复gap为空时报错的问题
This commit is contained in:
QingHuan
GitHub
parent
74c90beb40
commit
7b44765adc
@ -10,8 +10,8 @@
|
||||
如果存在用户手动点击 `fab` 以外某个地方如按钮滑出 `fab` 的场景，则需要在点击的元素（在这里是按钮）加上 `click.stop=""` 阻止事件冒泡到根元素上，避免触发 `closeOutside`把要手动打开的 `fab` 关闭了。
|
||||
:::
|
||||
|
||||
|
||||
## 基本用法
|
||||
|
||||
通过`type`设置悬浮按钮触发器的类型，`position`设置悬浮按钮触发器的位置，`direction`设置动作按钮的打开方向，`disabled`设置悬浮按钮是否禁用。
|
||||
|
||||
```html
|
||||
@ -31,6 +31,7 @@
|
||||
</wd-button>
|
||||
</wd-fab>
|
||||
```
|
||||
|
||||
```ts
|
||||
import { useToast } from '@/uni_modules/wot-design-uni'
|
||||
const { show: showToast } = useToast()
|
||||
@ -39,6 +40,7 @@ const position = ref<'left-top' | 'right-top' | 'left-bottom' | 'right-bottom'>(
|
||||
const direction = ref<'top' | 'right' | 'bottom' | 'left'>('top')
|
||||
const disabled = ref<boolean>(false)
|
||||
```
|
||||
|
||||
```scss
|
||||
:deep(.custom-button) {
|
||||
min-width: auto !important;
|
||||
@ -58,15 +60,18 @@ const disabled = ref<boolean>(false)
|
||||
## 动作菜单展开/收起
|
||||
|
||||
通过`v-model:active`控制动作按钮菜单的展开/收起
|
||||
```html
|
||||
|
||||
```html
|
||||
<wd-fab v-model:active="active">
|
||||
```
|
||||
|
||||
```ts
|
||||
const active = ref<boolean>(false)
|
||||
|
||||
```
|
||||
|
||||
## 可拖动按钮
|
||||
|
||||
```html
|
||||
<wd-fab :draggable="true">
|
||||
```
|
||||
@ -77,18 +82,19 @@ const active = ref<boolean>(false)
|
||||
|
||||
## 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 |
|
||||
| customStyle | 自定义样式 | string | - | '' | 0.1.57 |
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| -------------- | ---------------------------------- | ------------ | ----------------------------------------------------------------------------------------- | ---------------------------------------------- | ---------------- |
|
||||
| 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 \} | $LOWEST_VERSION$ |
|
||||
| customStyle | 自定义样式 | string | - | '' | 0.1.57 |
|
||||
|
||||
## 外部样式类
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
|
||||
import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
|
||||
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 FabDirection = 'top' | 'right' | 'bottom' | 'left'
|
||||
|
||||
export type FabGap = Partial<Record<FabDirection, number>>
|
||||
export const fabProps = {
|
||||
...baseProps,
|
||||
/**
|
||||
@ -42,7 +43,11 @@ export const fabProps = {
|
||||
/**
|
||||
* 是否可拖动
|
||||
*/
|
||||
draggable: makeBooleanProp(false)
|
||||
draggable: makeBooleanProp(false),
|
||||
gap: {
|
||||
type: Object as PropType<FabGap>,
|
||||
default: () => ({})
|
||||
}
|
||||
}
|
||||
|
||||
export type FabProps = ExtractPropTypes<typeof fabProps>
|
||||
|
||||
@ -96,16 +96,16 @@ const bounding = reactive({
|
||||
maxTop: 0,
|
||||
maxLeft: 0
|
||||
})
|
||||
const fabGap: number = 16 // fab默认与边缘的间距
|
||||
|
||||
function getBounding() {
|
||||
const sysInfo = uni.getSystemInfoSync()
|
||||
const { top = 16, left = 16, right = 16, bottom = 16 } = props.gap
|
||||
screen.width = sysInfo.windowWidth
|
||||
screen.height = isH5 ? sysInfo.windowTop + sysInfo.windowHeight : sysInfo.windowHeight
|
||||
bounding.minTop = isH5 ? sysInfo.windowTop + fabGap : fabGap
|
||||
bounding.minLeft = fabGap
|
||||
bounding.maxLeft = screen.width - fabSize.value - fabGap
|
||||
bounding.maxTop = screen.height - fabSize.value - fabGap
|
||||
bounding.minTop = isH5 ? sysInfo.windowTop + top : top
|
||||
bounding.minLeft = left
|
||||
bounding.maxLeft = screen.width - fabSize.value - right
|
||||
bounding.maxTop = screen.height - fabSize.value - bottom
|
||||
}
|
||||
|
||||
function initPosition() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user