mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(BackTop): update demo and document (#11272)
This commit is contained in:
neverland
GitHub
parent
e50966ecdf
commit
0472b10310
@ -45,18 +45,20 @@ export type BackTopProps = ExtractPropTypes<typeof backTopProps>;
|
||||
export default defineComponent({
|
||||
name,
|
||||
|
||||
inheritAttrs: false,
|
||||
|
||||
props: backTopProps,
|
||||
|
||||
emits: ['click'],
|
||||
|
||||
setup(props, { emit, slots }) {
|
||||
setup(props, { emit, slots, attrs }) {
|
||||
const show = ref(false);
|
||||
const scrollParent = ref<Window | HTMLElement>();
|
||||
const backTopEl = ref<HTMLElement | null>(null);
|
||||
const root = ref<HTMLElement | null>(null);
|
||||
|
||||
let target: Window | HTMLElement;
|
||||
|
||||
const backTopStyle = computed(() => ({
|
||||
const style = computed(() => ({
|
||||
right: addUnit(props.right),
|
||||
bottom: addUnit(props.bottom),
|
||||
}));
|
||||
@ -73,8 +75,6 @@ export default defineComponent({
|
||||
show.value = getScrollTop(target) >= props.visibilityHeight;
|
||||
};
|
||||
|
||||
const throttleScroll = throttle(scroll, 300);
|
||||
|
||||
const getTarget = () => {
|
||||
const { target } = props;
|
||||
|
||||
@ -86,19 +86,23 @@ export default defineComponent({
|
||||
return el as HTMLElement;
|
||||
}
|
||||
|
||||
if (isObject(target)) return target;
|
||||
if (isObject(target)) {
|
||||
return target;
|
||||
}
|
||||
|
||||
throw Error(
|
||||
'[Vant] BackTop: type of prop "target" should be a selector or an element object'
|
||||
);
|
||||
};
|
||||
|
||||
useEventListener('scroll', throttleScroll, { target: scrollParent });
|
||||
useEventListener('scroll', throttle(scroll, 300), { target: scrollParent });
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
if (inBrowser) {
|
||||
target = props.target
|
||||
? (getTarget() as typeof target)
|
||||
: (getScrollParent(backTopEl.value!) as typeof target);
|
||||
: (getScrollParent(root.value!) as typeof target);
|
||||
scrollParent.value = target;
|
||||
}
|
||||
});
|
||||
@ -107,14 +111,20 @@ export default defineComponent({
|
||||
return () => {
|
||||
const Content = (
|
||||
<div
|
||||
ref={backTopEl}
|
||||
ref={root}
|
||||
class={bem({ active: show.value })}
|
||||
style={backTopStyle.value}
|
||||
style={style.value}
|
||||
onClick={onClick}
|
||||
{...attrs}
|
||||
>
|
||||
{slots.default ? slots.default() : <Icon name="back-top" />}
|
||||
{slots.default ? (
|
||||
slots.default()
|
||||
) : (
|
||||
<Icon name="back-top" class={bem('icon')} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (props.teleport) {
|
||||
return <Teleport to={props.teleport}>{Content}</Teleport>;
|
||||
}
|
||||
|
||||
@ -20,69 +20,90 @@ app.use(BackTop);
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||
Please scroll the demo page to display the back top button.
|
||||
|
||||
<van-back-top />
|
||||
```html
|
||||
<van-cell v-for="item in list" :key="item" :title="item" /> <van-back-top />
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
setup() {
|
||||
const list = [...Array(50).keys()];
|
||||
return { list };
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Custom Position
|
||||
|
||||
Using `right` and `bottom` props to set the position of BackTop component.
|
||||
|
||||
```html
|
||||
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||
<van-back-top right="15vw" bottom="10vh" />
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
setup() {
|
||||
const list = [...Array(50).keys()];
|
||||
return { list };
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Custom Content
|
||||
|
||||
Using the default slot to custom content.
|
||||
|
||||
```html
|
||||
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||
<van-back-top>
|
||||
<div class="custom">Custom Content</div>
|
||||
</van-back-top>
|
||||
<van-back-top class="custom">Back Top</van-back-top>
|
||||
|
||||
<style>
|
||||
.custom {
|
||||
width: 80px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
setup() {
|
||||
const list = [...Array(50).keys()];
|
||||
return { list };
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
```css
|
||||
.custom {
|
||||
width: 200px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
### Set Scroll Target
|
||||
|
||||
```html
|
||||
<div class="container">
|
||||
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||
<van-back-top target=".container" bottom="100" right="30" />
|
||||
<van-back-top target=".container" bottom="30vh" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
height: 60vh;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
setup() {
|
||||
const list = [...Array(50).keys()];
|
||||
return { list };
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
```css
|
||||
.container {
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@ -101,6 +122,14 @@ export default {
|
||||
| ------- | ------------------------- |
|
||||
| default | customize default content |
|
||||
|
||||
### Types
|
||||
|
||||
The component exports the following type definitions:
|
||||
|
||||
```ts
|
||||
import type { BackTopProps, BackTopThemeVars } from 'vant';
|
||||
```
|
||||
|
||||
## Theming
|
||||
|
||||
### CSS Variables
|
||||
|
||||
@ -20,80 +20,99 @@ app.use(BackTop);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过滚动 Demo 页面查看右下角按钮。
|
||||
请滚动示例页面来查看右下角的返回顶部按钮。
|
||||
|
||||
```html
|
||||
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||
|
||||
<van-back-top />
|
||||
<van-cell v-for="item in list" :key="item" :title="item" /> <van-back-top />
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
setup() {
|
||||
const list = [...Array(50).keys()];
|
||||
return { list };
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 自定义位置
|
||||
|
||||
通过 `right` 和 `bottom` 属性来设置组件距离右侧和底部的位置。
|
||||
|
||||
```html
|
||||
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||
<van-back-top right="15vw" bottom="10vh" />
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
setup() {
|
||||
const list = [...Array(50).keys()];
|
||||
return { list };
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 自定义内容
|
||||
|
||||
使用默认插槽来自定义组件展示的内容。
|
||||
|
||||
```html
|
||||
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||
<van-back-top>
|
||||
<div class="custom">自定义内容</div>
|
||||
</van-back-top>
|
||||
<van-back-top class="custom">返回顶部</van-back-top>
|
||||
|
||||
<style>
|
||||
.custom {
|
||||
width: 80px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
setup() {
|
||||
const list = [...Array(50).keys()];
|
||||
return { list };
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
```css
|
||||
.custom {
|
||||
width: 200px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
### 设置滚动目标
|
||||
|
||||
### 设置监听目标
|
||||
|
||||
可以通过设置 `target` 控制监听哪个元素触发 Back Top。
|
||||
可以通过 `target` 属性来设置触发滚动的目标对象，支持传入选择器或 `HTMLElement`。
|
||||
|
||||
```html
|
||||
<div class="container">
|
||||
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||
<van-back-top target=".container" bottom="100" right="30" />
|
||||
<van-back-top target=".container" bottom="30vh" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
height: 60vh;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
setup() {
|
||||
const list = [...Array(50).keys()];
|
||||
return { list };
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
```css
|
||||
.container {
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| target | 触发滚动的目标对象，支持`selector`和`HTMLElement` | _string \| HTMLElement_ | - |
|
||||
| target | 触发滚动的目标对象，支持传入选择器或 `HTMLElement` | _string \| HTMLElement_ | - |
|
||||
| right | 距离页面右侧的距离，默认单位为 `px` | _number \| string_ | `30` |
|
||||
| bottom | 距离页面底部的距离，默认单位为 `px` | _number \| string_ | `40` |
|
||||
| visibility-height | 滚动高度达到此参数值才显示 | _number_ | `200` |
|
||||
@ -105,6 +124,14 @@ export default {
|
||||
| ------- | ------------------ |
|
||||
| default | 自定义按钮显示内容 |
|
||||
|
||||
### 类型定义
|
||||
|
||||
组件导出以下类型定义：
|
||||
|
||||
```ts
|
||||
import type { BackTopProps, BackTopThemeVars } from 'vant';
|
||||
```
|
||||
|
||||
## 主题定制
|
||||
|
||||
### 样式变量
|
||||
|
||||
@ -8,50 +8,61 @@ import { useTranslate } from '../../../docs/site';
|
||||
|
||||
const t = useTranslate({
|
||||
'zh-CN': {
|
||||
backTop: '返回顶部',
|
||||
customContent: '自定义内容',
|
||||
setScrollTarget: '设置监听目标',
|
||||
customPosition: '自定义位置',
|
||||
setScrollTarget: '设置滚动目标',
|
||||
},
|
||||
'en-US': {
|
||||
backTop: 'Back Top',
|
||||
customContent: 'Custom Content',
|
||||
customPosition: 'Custom Position',
|
||||
setScrollTarget: 'Set Scroll Target',
|
||||
},
|
||||
});
|
||||
|
||||
const activeTab = ref(0);
|
||||
const list = [...Array(50).keys()];
|
||||
const targetEl = ref<HTMLElement>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<van-tabs>
|
||||
<van-tabs v-model:active="activeTab">
|
||||
<van-tab :title="t('basicUsage')">
|
||||
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||
<van-back-top />
|
||||
<van-back-top v-if="activeTab === 0" />
|
||||
</van-tab>
|
||||
|
||||
<van-tab :title="t('customPosition')">
|
||||
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||
<van-back-top v-if="activeTab === 1" right="15vw" bottom="10vh" />
|
||||
</van-tab>
|
||||
|
||||
<van-tab :title="t('customContent')">
|
||||
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||
<van-back-top bottom="100" right="30">
|
||||
<div class="custom">{{ t('customContent') }}</div>
|
||||
<van-back-top v-if="activeTab === 2" class="custom-back-top">
|
||||
{{ t('backTop') }}
|
||||
</van-back-top>
|
||||
</van-tab>
|
||||
|
||||
<van-tab :title="t('setScrollTarget')">
|
||||
<div class="back-top--test" ref="targetEl">
|
||||
<div class="back-top-wrapper" ref="targetEl">
|
||||
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||
<van-back-top :target="targetEl" bottom="150" right="30" />
|
||||
<van-back-top v-if="activeTab === 3" :target="targetEl" bottom="30vh" />
|
||||
</div>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
.back-top--test {
|
||||
height: 400px;
|
||||
.back-top-wrapper {
|
||||
height: 60vh;
|
||||
overflow: auto;
|
||||
}
|
||||
.custom {
|
||||
width: 200px;
|
||||
line-height: 40px;
|
||||
|
||||
.custom-back-top {
|
||||
width: 80px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: var(--van-back-top-size);
|
||||
min-height: var(--van-back-top-size);
|
||||
width: var(--van-back-top-size);
|
||||
height: var(--van-back-top-size);
|
||||
cursor: pointer;
|
||||
color: var(--van-back-top-text-color);
|
||||
border-radius: var(--van-radius-max);
|
||||
@ -21,14 +21,14 @@
|
||||
background-color: var(--van-back-top-background);
|
||||
|
||||
&:active {
|
||||
opacity: 0.6;
|
||||
opacity: var(--van-active-opacity);
|
||||
}
|
||||
|
||||
&--active {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
&__icon {
|
||||
font-size: var(--van-back-top-icon-size);
|
||||
font-weight: var(--van-font-bold);
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Custom Content
|
||||
Custom Position
|
||||
</span>
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
@ -35,6 +35,17 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Custom Content
|
||||
</span>
|
||||
</div>
|
||||
<div id="van-tabs-3"
|
||||
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">
|
||||
Set Scroll Target
|
||||
@ -421,6 +432,14 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-3"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user