blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

feat(FloatingPanel): add duration prop (#11964)

Browse Source
This commit is contained in:
neverland 2023-06-11 22:23:05 +08:00 committed by GitHub
parent 621c0fc2f1
commit c8983b3946
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/vant/src/floating-panel/FloatingPanel.tsx
View File

@ -24,9 +24,10 @@ import { useSyncPropRef } from '../composables/use-sync-prop-ref';
const { height: windowHeight } = useWindowSize();
export const floatingPanelProps = {
anchors: makeArrayProp<number>(),
contentDraggable: truthProp,
height: makeNumericProp(0),
anchors: makeArrayProp<number>(),
duration: makeNumericProp(0.2),
contentDraggable: truthProp,
safeAreaInsetBottom: truthProp,
};
@ -69,7 +70,7 @@ export default defineComponent({
const rootStyle = computed(() => ({
height: addUnit(boundary.value.max),
transform: `translateY(calc(100% + ${addUnit(-height.value)}))`,
transition: !dragging.value ? 'transform .3s' : 'none',
transition: !dragging.value ? `transform ${props.duration}s` : 'none',
}));
const ease = (moveY: number): number => {

1
packages/vant/src/floating-panel/README.md
View File

@ -86,6 +86,7 @@ By default, both the header and content areas of FloatingPanel can be dragged, b
| --- | --- | --- | --- |
| v-model:height | The current display height of the panel | _number \| string_ | `0` |
| anchors | Setting custom anchors, unit `px` | _number[]_ | `[100, window.innerWidth * 0.6]` |
| duration | Transition duration, unit second | _number \| string_ | `0.3` |
| content-draggable | Allow dragging content | _boolean_ | `true` |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |

1
packages/vant/src/floating-panel/README.zh-CN.md
View File

@ -86,6 +86,7 @@ export default {
| --- | --- | --- | --- |
| v-model:height | 当前面板的显示高度 | _number \| string_ | `0` |
| anchors | 设置自定义锚点, 单位 `px` | _number[]_ | `[100, window.innerWidth * 0.6]` |
| duration | 动画时长，单位秒，设置为 0 可以禁用动画 | _number \| string_ | `0.3` |
| content-draggable | 允许拖拽内容容器 | _boolean_ | `true` |
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |

2
packages/vant/src/floating-panel/test/__snapshots__/demo.spec.ts.snap
View File

@ -55,7 +55,7 @@ exports[`should render demo and match snapshot 1`] = `
style
>
<div class="van-floating-panel van-safe-area-bottom"
style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform .3s;"
style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform 0.2s;"
>
<div class="van-floating-panel__header">
<div class="van-floating-panel__header-bar">

4
packages/vant/src/floating-panel/test/__snapshots__/index.spec.tsx.snap
View File

@ -2,7 +2,7 @@
exports[`should drag adsorption effect when anchors props is [100, 200, 400] 1`] = `
<div class="van-floating-panel van-safe-area-bottom"
style="height: 400px; transform: translateY(calc(100% + -100px)); transition: transform .3s;"
style="height: 400px; transform: translateY(calc(100% + -100px)); transition: transform 0.2s;"
>
<div class="van-floating-panel__header">
<div class="van-floating-panel__header-bar">
@ -16,7 +16,7 @@ exports[`should drag adsorption effect when anchors props is [100, 200, 400] 1`]
exports[`should minHeight 100 and maxHeight 0.6 innerHeight when anchors props do not 1`] = `
<div class="van-floating-panel van-safe-area-bottom"
style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform .3s;"
style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform 0.2s;"
>
<div class="van-floating-panel__header">
<div class="van-floating-panel__header-bar">