mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
feat(FloatingPanel): add new FloatingPanel component (#11832)
* fix(Swipe): props changed but component didn't * fix(Swipe): target watch windowWidth * Update packages/vant/src/swipe/Swipe.tsx * fix(Sticky): resize or orientationchange wrapper no reset width and height * fix(Sticky): resize or orientationchange wrapper no reset width and height * fix(Sticky): resize or orientationchange wrapper no reset width and height * fix(Sticky): resize or orientationchange wrapper no reset width and height * chore: sync * feat(FloatingPanel): add new FloatingPanel component * feat(FloatingPanel): add new FloatingPanel component * feat(FloatingPanel): optimized code * feat(FloatingPanel): optimized code --------- Co-authored-by: zhousg <345313727@qq.com> Co-authored-by: neverland <jait.chen@foxmail.com>
This commit is contained in:
ShuGang Zhou
GitHub
parent
890ad11822
commit
b8424849f0
139
packages/vant/src/floating-panel/FloatingPanel.tsx
Normal file
139
packages/vant/src/floating-panel/FloatingPanel.tsx
Normal file
@ -0,0 +1,139 @@
|
||||
import { computed, defineComponent, ref, type ExtractPropTypes } from 'vue';
|
||||
import { useLockScroll } from '../composables/use-lock-scroll';
|
||||
import { useTouch } from '../composables/use-touch';
|
||||
import { addUnit, createNamespace, makeArrayProp, truthProp } from '../utils';
|
||||
import { useWindowSize } from '@vant/use';
|
||||
|
||||
const { height: windowHeight } = useWindowSize();
|
||||
|
||||
export const floatingPanelProps = {
|
||||
anchors: makeArrayProp<number>(),
|
||||
contentDraggable: truthProp,
|
||||
safeAreaInsetBottom: truthProp,
|
||||
};
|
||||
|
||||
export type FloatingPanelProps = ExtractPropTypes<typeof floatingPanelProps>;
|
||||
|
||||
const [name, bem] = createNamespace('floating-panel');
|
||||
|
||||
const DAMP = 0.2;
|
||||
|
||||
export default defineComponent({
|
||||
name,
|
||||
|
||||
props: floatingPanelProps,
|
||||
|
||||
emits: ['heightChange'],
|
||||
|
||||
setup(props, { emit, slots }) {
|
||||
const rootRef = ref<HTMLDivElement>();
|
||||
const contentRef = ref<HTMLDivElement>();
|
||||
|
||||
const boundary = computed(() => ({
|
||||
min: props.anchors[0] ?? 100,
|
||||
max:
|
||||
props.anchors[props.anchors.length - 1] ??
|
||||
Math.round(windowHeight.value * 0.6),
|
||||
}));
|
||||
|
||||
const anchors = computed(() =>
|
||||
props.anchors.length >= 2
|
||||
? props.anchors
|
||||
: [boundary.value.min, boundary.value.max]
|
||||
);
|
||||
|
||||
const dragging = ref(false);
|
||||
const currentY = ref(-boundary.value.min);
|
||||
|
||||
const rootStyle = computed(() => ({
|
||||
height: addUnit(boundary.value.max),
|
||||
transform: `translateY(calc(100% + ${addUnit(currentY.value)}))`,
|
||||
transition: !dragging.value ? 'transform .3s' : 'none',
|
||||
}));
|
||||
|
||||
const ease = (moveY: number): number => {
|
||||
const absDistance = Math.abs(moveY);
|
||||
const { min, max } = boundary.value;
|
||||
|
||||
if (absDistance > max) {
|
||||
return -(max + (absDistance - max) * DAMP);
|
||||
}
|
||||
|
||||
if (absDistance < min) {
|
||||
return -(min - (min - absDistance) * DAMP);
|
||||
}
|
||||
|
||||
return moveY;
|
||||
};
|
||||
|
||||
const closest = (arr: number[], target: number) =>
|
||||
arr.reduce((pre, cur) =>
|
||||
Math.abs(pre - target) < Math.abs(cur - target) ? pre : cur
|
||||
);
|
||||
|
||||
let startY = currentY.value;
|
||||
const touch = useTouch();
|
||||
|
||||
const onTouchstart = (e: TouchEvent) => {
|
||||
touch.start(e);
|
||||
dragging.value = true;
|
||||
};
|
||||
|
||||
const onTouchmove = (e: TouchEvent) => {
|
||||
touch.move(e);
|
||||
|
||||
const target = e.target as Element;
|
||||
if (contentRef.value === target || contentRef.value?.contains(target)) {
|
||||
if (!props.contentDraggable) return;
|
||||
|
||||
if (-startY < boundary.value.max) {
|
||||
if (e.cancelable) e.preventDefault();
|
||||
e.stopPropagation();
|
||||
} else if (
|
||||
!(contentRef.value.scrollTop <= 0 && touch.deltaY.value > 0)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const moveY = touch.deltaY.value + startY;
|
||||
|
||||
currentY.value = ease(moveY);
|
||||
};
|
||||
|
||||
const onTouchend = () => {
|
||||
dragging.value = false;
|
||||
|
||||
const height = Math.abs(currentY.value);
|
||||
const closestHeight = closest(anchors.value, height);
|
||||
currentY.value = -closestHeight;
|
||||
|
||||
if (currentY.value !== startY) {
|
||||
emit('heightChange', closestHeight);
|
||||
}
|
||||
|
||||
startY = currentY.value;
|
||||
};
|
||||
|
||||
useLockScroll(rootRef, () => true);
|
||||
|
||||
return () => (
|
||||
<div
|
||||
class={[bem(), { 'van-safe-area-bottom': props.safeAreaInsetBottom }]}
|
||||
ref={rootRef}
|
||||
style={rootStyle.value}
|
||||
onTouchstartPassive={onTouchstart}
|
||||
onTouchmove={onTouchmove}
|
||||
onTouchend={onTouchend}
|
||||
onTouchcancel={onTouchend}
|
||||
>
|
||||
<div class={bem('header')}>
|
||||
<div class={bem('header-bar')} />
|
||||
</div>
|
||||
<div class={bem('content')} ref={contentRef}>
|
||||
{slots.default?.()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
109
packages/vant/src/floating-panel/README.md
Normal file
109
packages/vant/src/floating-panel/README.md
Normal file
@ -0,0 +1,109 @@
|
||||
# FloatingPanel
|
||||
|
||||
### Intro
|
||||
|
||||
A panel that floats at the bottom of a page, which can be dragged up and down to browse content, often used to provide additional functionality or information.
|
||||
|
||||
### Install
|
||||
|
||||
Register component globally via `app.use`, refer to [Component Registration](#/en-US/advanced-usage#zu-jian-zhu-ce) for more registration ways.
|
||||
|
||||
```js
|
||||
import { createApp } from 'vue';
|
||||
import { FloatingPanel } from 'vant';
|
||||
|
||||
const app = createApp();
|
||||
app.use(FloatingPanel);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-floating-panel>
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
v-for="i in 26"
|
||||
:key="i"
|
||||
:title="String.fromCharCode(i + 64)"
|
||||
size="large"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</van-floating-panel>
|
||||
```
|
||||
|
||||
### Custom Anchors
|
||||
|
||||
```html
|
||||
<van-floating-panel :anchors="anchors" @height-change="onHeightChange">
|
||||
<div style="text-align: center; padding: 15px">
|
||||
<p>Panel Show Height {{ height }} px</p>
|
||||
</div>
|
||||
</van-floating-panel>
|
||||
```
|
||||
|
||||
```ts
|
||||
const anchors = [
|
||||
100,
|
||||
Math.round(0.4 * window.innerHeight),
|
||||
Math.round(0.7 * window.innerHeight),
|
||||
];
|
||||
const height = ref(anchors[0]);
|
||||
const onHeightChange = (h: number) => {
|
||||
height.value = h;
|
||||
};
|
||||
```
|
||||
|
||||
### Head Drag Only
|
||||
|
||||
```html
|
||||
<van-floating-panel :content-draggable="false">
|
||||
<div style="text-align: center; padding: 15px">
|
||||
<p>Content cannot be dragged</p>
|
||||
</div>
|
||||
</van-floating-panel>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| anchors | Setting custom anchors, unit `px` | _number[]_ | `[100, window.innerWidth * 0.6]` |
|
||||
| content-draggable | Allow dragging content | _boolean_ | `true` |
|
||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
| ------------- | ------------------------------------ | ---------------- |
|
||||
| height-change | Emitted when panel height is changed | _height: number_ |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
| ------- | -------------------- |
|
||||
| default | Custom panel content |
|
||||
|
||||
### Types
|
||||
|
||||
The component exports the following type definitions:
|
||||
|
||||
```ts
|
||||
import type { FloatingPanelProps } from 'vant';
|
||||
```
|
||||
|
||||
## Theming
|
||||
|
||||
### CSS Variables
|
||||
|
||||
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ---------------------------------- | ------------------------- | ----------- |
|
||||
| --van-floating-panel-border-radius | _16px_ | - |
|
||||
| --van-floating-panel-header-height | _30px_ | - |
|
||||
| --van-floating-panel-z-index | _999_ | - |
|
||||
| --van-floating-panel-background | _var(--van-background-2)_ | - |
|
||||
109
packages/vant/src/floating-panel/README.zh-CN.md
Normal file
109
packages/vant/src/floating-panel/README.zh-CN.md
Normal file
@ -0,0 +1,109 @@
|
||||
# FloatingPanel 浮动面板
|
||||
|
||||
### 介绍
|
||||
|
||||
浮动在页面底部的面板，可以上下拖动来浏览内容，常用于提供额外的功能或信息。
|
||||
|
||||
### 引入
|
||||
|
||||
通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。
|
||||
|
||||
```js
|
||||
import { createApp } from 'vue';
|
||||
import { FloatingPanel } from 'vant';
|
||||
|
||||
const app = createApp();
|
||||
app.use(FloatingPanel);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<van-floating-panel>
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
v-for="i in 26"
|
||||
:key="i"
|
||||
:title="String.fromCharCode(i + 64)"
|
||||
size="large"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</van-floating-panel>
|
||||
```
|
||||
|
||||
### 自定义锚点
|
||||
|
||||
```html
|
||||
<van-floating-panel :anchors="anchors" @height-change="onHeightChange">
|
||||
<div style="text-align: center; padding: 15px">
|
||||
<p>面板显示高度 {{ height }} px</p>
|
||||
</div>
|
||||
</van-floating-panel>
|
||||
```
|
||||
|
||||
```ts
|
||||
const anchors = [
|
||||
100,
|
||||
Math.round(0.4 * window.innerHeight),
|
||||
Math.round(0.7 * window.innerHeight),
|
||||
];
|
||||
const height = ref(anchors[0]);
|
||||
const onHeightChange = (h: number) => {
|
||||
height.value = h;
|
||||
};
|
||||
```
|
||||
|
||||
### 仅头部拖拽
|
||||
|
||||
```html
|
||||
<van-floating-panel :content-draggable="false">
|
||||
<div style="text-align: center; padding: 15px">
|
||||
<p>内容不可拖拽</p>
|
||||
</div>
|
||||
</van-floating-panel>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| anchors | 设置自定义锚点, 单位 `px` | _number[]_ | `[100, window.innerWidth * 0.6]` |
|
||||
| content-draggable | 允许拖拽内容容器 | _boolean_ | `true` |
|
||||
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------------- | ---------------------- | ---------------- |
|
||||
| height-change | 面板显示高度改变时触发 | _height: number_ |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
| ------- | -------------- |
|
||||
| default | 自定义面板内容 |
|
||||
|
||||
### 类型定义
|
||||
|
||||
组件导出以下类型定义：
|
||||
|
||||
```ts
|
||||
import type { FloatingPanelProps } from 'vant';
|
||||
```
|
||||
|
||||
## 主题定制
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ---------------------------------- | ------------------------- | ----------- |
|
||||
| --van-floating-panel-border-radius | _16px_ | - |
|
||||
| --van-floating-panel-header-height | _30px_ | - |
|
||||
| --van-floating-panel-z-index | _999_ | - |
|
||||
| --van-floating-panel-background | _var(--van-background-2)_ | - |
|
||||
69
packages/vant/src/floating-panel/demo/index.vue
Normal file
69
packages/vant/src/floating-panel/demo/index.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import VanTabs from '../../tabs';
|
||||
import VanTab from '../../tab';
|
||||
import VanCell from '../../cell';
|
||||
import VanCellGroup from '../../cell-group';
|
||||
import VanFloatingPanel from '..';
|
||||
import { useTranslate } from '../../../docs/site';
|
||||
import { useWindowSize } from '@vant/use';
|
||||
|
||||
const { height: windowHeight } = useWindowSize();
|
||||
|
||||
const t = useTranslate({
|
||||
'zh-CN': {
|
||||
customAnchors: '自定义锚点',
|
||||
headDragOnly: '仅头部拖拽',
|
||||
panelShowHeight: '面板显示高度',
|
||||
contentUnDrag: '内容不可拖拽',
|
||||
},
|
||||
'en-US': {
|
||||
customAnchors: 'Custom Anchors',
|
||||
headDragOnly: 'Head Drag Only',
|
||||
panelShowHeight: 'Panel Show Height',
|
||||
contentUnDrag: 'Content cannot be dragged',
|
||||
},
|
||||
});
|
||||
|
||||
const anchors = [
|
||||
100,
|
||||
Math.round(0.4 * windowHeight.value),
|
||||
Math.round(0.7 * windowHeight.value),
|
||||
];
|
||||
|
||||
const height = ref(anchors[0]);
|
||||
const onHeightChange = (h: number) => {
|
||||
height.value = h;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<van-tabs>
|
||||
<van-tab :title="t('basicUsage')">
|
||||
<van-floating-panel>
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
v-for="i in 26"
|
||||
:key="i"
|
||||
:title="String.fromCharCode(i + 64)"
|
||||
size="large"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</van-floating-panel>
|
||||
</van-tab>
|
||||
<van-tab :title="t('customAnchors')">
|
||||
<van-floating-panel :anchors="anchors" @height-change="onHeightChange">
|
||||
<div style="text-align: center; padding: 15px">
|
||||
<p>{{ t('panelShowHeight') }} {{ height }} px</p>
|
||||
</div>
|
||||
</van-floating-panel>
|
||||
</van-tab>
|
||||
<van-tab :title="t('headDragOnly')">
|
||||
<van-floating-panel :content-draggable="false">
|
||||
<div style="text-align: center; padding: 15px">
|
||||
<p>{{ t('contentUnDrag') }}</p>
|
||||
</div>
|
||||
</van-floating-panel>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</template>
|
||||
52
packages/vant/src/floating-panel/index.less
Normal file
52
packages/vant/src/floating-panel/index.less
Normal file
@ -0,0 +1,52 @@
|
||||
:root {
|
||||
--van-floating-panel-border-radius: 16px;
|
||||
--van-floating-panel-header-height: 30px;
|
||||
--van-floating-panel-z-index: 999;
|
||||
--van-floating-panel-background: var(--van-background-2);
|
||||
}
|
||||
|
||||
.van-floating-panel {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
z-index: var(--van-floating-panel-z-index);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
touch-action: none;
|
||||
border-top-left-radius: var(--van-floating-panel-border-radius);
|
||||
border-top-right-radius: var(--van-floating-panel-border-radius);
|
||||
background: var(--van-floating-panel-background);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -100vh;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
&__header {
|
||||
height: var(--van-floating-panel-header-height);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
|
||||
&-bar {
|
||||
height: 3px;
|
||||
width: 20px;
|
||||
border-radius: 4px;
|
||||
background: var(--van-gray-5);
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background-color: var(--van-floating-panel-background);
|
||||
}
|
||||
}
|
||||
14
packages/vant/src/floating-panel/index.ts
Normal file
14
packages/vant/src/floating-panel/index.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { withInstall } from '../utils';
|
||||
import _FloatingPanel, { FloatingPanelProps } from './FloatingPanel';
|
||||
|
||||
export const FloatingPanel = withInstall(_FloatingPanel);
|
||||
|
||||
export default FloatingPanel;
|
||||
|
||||
export type { FloatingPanelProps };
|
||||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
VanFloatingPanel: typeof FloatingPanel;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,44 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<!--[-->
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
style
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<!--[-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<!--[-->
|
||||
<!--[-->
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style="display:none;"
|
||||
>
|
||||
</div>
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display:none;"
|
||||
>
|
||||
</div>
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display:none;"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -0,0 +1,270 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Basic Usage
|
||||
</span>
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Custom Anchors
|
||||
</span>
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Head Drag Only
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-tabs__line"
|
||||
style="transform: translateX(50px) translateX(-50%);"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
<div class="van-floating-panel van-safe-area-bottom"
|
||||
style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform .3s;"
|
||||
>
|
||||
<div class="van-floating-panel__header">
|
||||
<div class="van-floating-panel__header-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-floating-panel__content">
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
A
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
B
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
C
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
D
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
E
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
F
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
G
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
H
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
I
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
J
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
K
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
L
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
M
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
N
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
O
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
P
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Q
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
R
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
S
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
T
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
U
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
V
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
W
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
X
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Y
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Z
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -0,0 +1,29 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
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;"
|
||||
>
|
||||
<div class="van-floating-panel__header">
|
||||
<div class="van-floating-panel__header-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-floating-panel__content">
|
||||
内容
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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;"
|
||||
>
|
||||
<div class="van-floating-panel__header">
|
||||
<div class="van-floating-panel__header-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-floating-panel__content">
|
||||
Content
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
7
packages/vant/src/floating-panel/test/demo-ssr.spec.ts
Normal file
7
packages/vant/src/floating-panel/test/demo-ssr.spec.ts
Normal file
@ -0,0 +1,7 @@
|
||||
/**
|
||||
* @jest-environment node
|
||||
*/
|
||||
import Demo from '../demo/index.vue';
|
||||
import { snapshotDemo } from '../../../test/demo';
|
||||
|
||||
snapshotDemo(Demo, { ssr: true });
|
||||
5
packages/vant/src/floating-panel/test/demo.spec.ts
Normal file
5
packages/vant/src/floating-panel/test/demo.spec.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import Demo from '../demo/index.vue';
|
||||
|
||||
import { snapshotDemo } from '../../../test/demo';
|
||||
|
||||
snapshotDemo(Demo);
|
||||
118
packages/vant/src/floating-panel/test/index.spec.tsx
Normal file
118
packages/vant/src/floating-panel/test/index.spec.tsx
Normal file
@ -0,0 +1,118 @@
|
||||
import { later, mount, triggerDrag } from '../../../test';
|
||||
import FloatingPanel from '..';
|
||||
|
||||
test('should minHeight 100 and maxHeight 0.6 innerHeight when anchors props do not', async () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return <FloatingPanel>Content</FloatingPanel>;
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
expect((wrapper.element as HTMLDivElement).style.height).toBe(
|
||||
`${Math.round(window.innerHeight * 0.6)}px`
|
||||
);
|
||||
|
||||
expect((wrapper.element as HTMLDivElement).style.transform).toContain(
|
||||
'-100px'
|
||||
);
|
||||
});
|
||||
|
||||
test('should drag adsorption effect when anchors props is [100, 200, 400]', async () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return <FloatingPanel anchors={[100, 200, 400]}>内容</FloatingPanel>;
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
expect((wrapper.element as HTMLDivElement).style.height).toBe('400px');
|
||||
|
||||
// drag 10
|
||||
await triggerDrag(wrapper.find('.van-floating-panel__header'), 0, 10);
|
||||
await later();
|
||||
expect((wrapper.element as HTMLDivElement).style.transform).toContain(
|
||||
'-100px'
|
||||
);
|
||||
|
||||
expect((wrapper.element as HTMLDivElement).style.transform).toContain(
|
||||
'-100px'
|
||||
);
|
||||
|
||||
// drag -49
|
||||
await triggerDrag(wrapper.find('.van-floating-panel__header'), 0, -49);
|
||||
await later();
|
||||
expect((wrapper.element as HTMLDivElement).style.transform).toContain(
|
||||
'-100px'
|
||||
);
|
||||
|
||||
await triggerDrag(wrapper.find('.van-floating-panel__header'), 0, -199);
|
||||
await later();
|
||||
expect((wrapper.element as HTMLDivElement).style.transform).toContain(
|
||||
'-200px'
|
||||
);
|
||||
|
||||
// drag -300
|
||||
await triggerDrag(wrapper.find('.van-floating-panel__header'), 0, -200);
|
||||
await later();
|
||||
expect((wrapper.element as HTMLDivElement).style.transform).toContain(
|
||||
'-400px'
|
||||
);
|
||||
|
||||
// drag -500
|
||||
await triggerDrag(wrapper.find('.van-floating-panel__header'), 0, -500);
|
||||
await later();
|
||||
expect((wrapper.element as HTMLDivElement).style.transform).toContain(
|
||||
'-400px'
|
||||
);
|
||||
});
|
||||
|
||||
test('should emit height-change when height change in anchors', async () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return (
|
||||
<FloatingPanel
|
||||
anchors={[100, 200, 400]}
|
||||
onHeightChange={(h) => this.$emit('change', h)}
|
||||
>
|
||||
Content
|
||||
</FloatingPanel>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
await triggerDrag(wrapper.find('.van-floating-panel__header'), 0, -199);
|
||||
await later();
|
||||
|
||||
expect((wrapper.element as HTMLDivElement).style.transform).toContain(
|
||||
'-200px'
|
||||
);
|
||||
|
||||
expect(wrapper.emitted('change')?.[0][0]).toEqual(200);
|
||||
});
|
||||
|
||||
test('should only drag header when allowDraggingContent is false', async () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return (
|
||||
<FloatingPanel
|
||||
anchors={[100, 200, 400]}
|
||||
onHeightChange={(h) => this.$emit('change', h)}
|
||||
contentDraggable={false}
|
||||
>
|
||||
Content
|
||||
</FloatingPanel>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
await triggerDrag(wrapper.find('.van-floating-panel__content'), 0, -199);
|
||||
await later();
|
||||
expect(wrapper.emitted('change')).toBeFalsy();
|
||||
|
||||
await triggerDrag(wrapper.find('.van-floating-panel__header'), 0, -199);
|
||||
await later();
|
||||
expect(wrapper.emitted('change')).toBeTruthy();
|
||||
});
|
||||
@ -251,6 +251,10 @@ location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io');
|
||||
path: 'dropdown-menu',
|
||||
title: 'DropdownMenu 下拉菜单',
|
||||
},
|
||||
{
|
||||
path: 'floating-panel',
|
||||
title: 'FloatingPanel 浮动面板',
|
||||
},
|
||||
{
|
||||
path: 'loading',
|
||||
title: 'Loading 加载',
|
||||
@ -703,6 +707,10 @@ location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io');
|
||||
path: 'dropdown-menu',
|
||||
title: 'DropdownMenu',
|
||||
},
|
||||
{
|
||||
path: 'floating-panel',
|
||||
title: 'FloatingPanel',
|
||||
},
|
||||
{
|
||||
path: 'loading',
|
||||
title: 'Loading',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user