blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(BackTop): When teleport is the default, the parent scroll contain… (#11858)

Browse Source 
* fix(BackTop): When teleport is the default, the parent scroll container is always window

* fix(BackTop): When teleport is the default, the parent scroll container is always window
This commit is contained in:
Zhousg 2023-05-20 21:09:34 +08:00 committed by GitHub
parent b94c8c3333
commit 08f82392b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/vant/src/back-top/BackTop.tsx
View File

@ -121,7 +121,7 @@ export default defineComponent({
return () => { return () => {
const Content = ( const Content = (
<div <div
ref={root} ref={!props.teleport ? root : undefined}
class={bem({ active: show.value })} class={bem({ active: show.value })}
style={style.value} style={style.value}
onClick={onClick} onClick={onClick}
@ -136,7 +136,10 @@ export default defineComponent({
); );
if (props.teleport) { if (props.teleport) {
return <Teleport to={props.teleport}>{Content}</Teleport>; return [
<div ref={root} class={bem('placeholder')}></div>,
<Teleport to={props.teleport}>{Content}</Teleport>,
];
} }
return Content; return Content;
}; };

2
packages/vant/src/back-top/README.md
View File

@ -120,7 +120,7 @@ Add `immediate` prop to scroll to top immediately.
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| target | Can be a selector or a DOM ELement | _string \| HTMLElement_ | - | | target | Can be a selector or a DOM ELement, default closest parent scrolling container | _string \| HTMLElement_ | - |
| right | Right distance of the page, the default unit is px | _number \| string_ | `30` | | right | Right distance of the page, the default unit is px | _number \| string_ | `30` |
| bottom | Bottom distance of the page, the default unit is px | _number \| string_ | `40` | | bottom | Bottom distance of the page, the default unit is px | _number \| string_ | `40` |
| offset | The component will not display until the scroll offset reaches this value | _number_ | `200` | | offset | The component will not display until the scroll offset reaches this value | _number_ | `200` |

2
packages/vant/src/back-top/README.zh-CN.md
View File

@ -122,7 +122,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| target | 触发滚动的目标对象，支持传入选择器或 DOM 元素 | _string \| HTMLElement_ | - | | target | 触发滚动的目标对象，支持传入选择器或 DOM 元素，默认最近的父级滚动容器 | _string \| HTMLElement_ | - |
| right | 距离页面右侧的距离，默认单位为 `px` | _number \| string_ | `30` | | right | 距离页面右侧的距离，默认单位为 `px` | _number \| string_ | `30` |
| bottom | 距离页面底部的距离，默认单位为 `px` | _number \| string_ | `40` | | bottom | 距离页面底部的距离，默认单位为 `px` | _number \| string_ | `40` |
| offset | 滚动高度达到此参数值时才显示组件 | _number_ | `200` | | offset | 滚动高度达到此参数值时才显示组件 | _number_ | `200` |

4
packages/vant/src/back-top/index.less
View File

@ -30,6 +30,10 @@
opacity: var(--van-active-opacity); opacity: var(--van-active-opacity);
} }
&__placeholder {
display: none;
}
&--active { &--active {
transform: scale(1); transform: scale(1);
} }

2
packages/vant/src/back-top/test/__snapshots__/demo.spec.ts.snap
View File

@ -426,6 +426,8 @@ exports[`should render demo and match snapshot 1`] = `
</span> </span>
</div> </div>
</div> </div>
<div class="van-back-top__placeholder">
</div>
</div> </div>
<div id="van-tab" <div id="van-tab"
role="tabpanel" role="tabpanel"