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

docs(BackTop): update demo and document (#11272)

Browse Source
This commit is contained in:
neverland 2022-11-19 16:32:54 +08:00 committed by GitHub
parent e50966ecdf
commit 0472b10310
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 172 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,18 +45,20 @@ export type BackTopProps = ExtractPropTypes<typeof backTopProps>;
export default defineComponent({ export default defineComponent({
name, name,
inheritAttrs: false,
props: backTopProps, props: backTopProps,
emits: ['click'], emits: ['click'],
setup(props, { emit, slots }) { setup(props, { emit, slots, attrs }) {
const show = ref(false); const show = ref(false);
const scrollParent = ref<Window | HTMLElement>(); const scrollParent = ref<Window | HTMLElement>();
const backTopEl = ref<HTMLElement | null>(null); const root = ref<HTMLElement | null>(null);
let target: Window | HTMLElement; let target: Window | HTMLElement;
const backTopStyle = computed(() => ({ const style = computed(() => ({
right: addUnit(props.right), right: addUnit(props.right),
bottom: addUnit(props.bottom), bottom: addUnit(props.bottom),
})); }));
@ -73,8 +75,6 @@ export default defineComponent({
show.value = getScrollTop(target) >= props.visibilityHeight; show.value = getScrollTop(target) >= props.visibilityHeight;
}; };
const throttleScroll = throttle(scroll, 300);
const getTarget = () => { const getTarget = () => {
const { target } = props; const { target } = props;
@ -86,19 +86,23 @@ export default defineComponent({
return el as HTMLElement; return el as HTMLElement;
} }
if (isObject(target)) return target; if (isObject(target)) {
return target;
}
throw Error( throw Error(
'[Vant] BackTop: type of prop "target" should be a selector or an element object' '[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(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
if (inBrowser) { if (inBrowser) {
target = props.target target = props.target
? (getTarget() as typeof target) ? (getTarget() as typeof target)
: (getScrollParent(backTopEl.value!) as typeof target); : (getScrollParent(root.value!) as typeof target);
scrollParent.value = target; scrollParent.value = target;
} }
}); });
@ -107,14 +111,20 @@ export default defineComponent({
return () => { return () => {
const Content = ( const Content = (
<div <div
ref={backTopEl} ref={root}
class={bem({ active: show.value })} class={bem({ active: show.value })}
style={backTopStyle.value} style={style.value}
onClick={onClick} onClick={onClick}
{...attrs}
> >
{slots.default ? slots.default() : <Icon name="back-top" />} {slots.default ? (
slots.default()
) : (
<Icon name="back-top" class={bem('icon')} />
)}
</div> </div>
); );
if (props.teleport) { if (props.teleport) {
return <Teleport to={props.teleport}>{Content}</Teleport>; return <Teleport to={props.teleport}>{Content}</Teleport>;
} }

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

@ -20,69 +20,90 @@ app.use(BackTop);
### Basic Usage ### Basic Usage
```html Please scroll the demo page to display the back top button.
<van-cell v-for="item in list" :key="item" :title="item" />
<van-back-top /> ```html
<van-cell v-for="item in list" :key="item" :title="item" /> <van-back-top />
``` ```
```js ```js
export default { export default {
setup() { setup() {
const list = [...Array(50).keys()]; 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 ### Custom Content
Using the default slot to custom content.
```html ```html
<van-cell v-for="item in list" :key="item" :title="item" /> <van-cell v-for="item in list" :key="item" :title="item" />
<van-back-top> <van-back-top class="custom">Back Top</van-back-top>
<div class="custom">Custom Content</div>
</van-back-top> <style>
.custom {
width: 80px;
font-size: 14px;
text-align: center;
}
</style>
``` ```
```js ```js
export default { export default {
setup() { setup() {
const list = [...Array(50).keys()]; const list = [...Array(50).keys()];
return { list };
}, },
}; };
``` ```
```css
.custom {
width: 200px;
line-height: 40px;
text-align: center;
}
```
### Set Scroll Target ### Set Scroll Target
```html ```html
<div class="container"> <div class="container">
<van-cell v-for="item in list" :key="item" :title="item" /> <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> </div>
<style>
.container {
height: 60vh;
overflow: auto;
}
</style>
``` ```
```js ```js
export default { export default {
setup() { setup() {
const list = [...Array(50).keys()]; const list = [...Array(50).keys()];
return { list };
}, },
}; };
``` ```
```css
.container {
height: 300px;
overflow: auto;
}
```
## API ## API
### Props ### Props
@ -101,6 +122,14 @@ export default {
| ------- | ------------------------- | | ------- | ------------------------- |
| default | customize default content | | default | customize default content |
### Types
The component exports the following type definitions:
```ts
import type { BackTopProps, BackTopThemeVars } from 'vant';
```
## Theming ## Theming
### CSS Variables ### CSS Variables

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

@ -20,80 +20,99 @@ app.use(BackTop);
### 基础用法 ### 基础用法
通过滚动 Demo 页面查看右下角按钮。 请滚动示例页面来查看右下角的返回顶部按钮。
```html ```html
<van-cell v-for="item in list" :key="item" :title="item" /> <van-cell v-for="item in list" :key="item" :title="item" /> <van-back-top />
<van-back-top />
``` ```
```js ```js
export default { export default {
setup() { setup() {
const list = [...Array(50).keys()]; 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 ```html
<van-cell v-for="item in list" :key="item" :title="item" /> <van-cell v-for="item in list" :key="item" :title="item" />
<van-back-top> <van-back-top class="custom">返回顶部</van-back-top>
<div class="custom">自定义内容</div>
</van-back-top> <style>
.custom {
width: 80px;
font-size: 14px;
text-align: center;
}
</style>
``` ```
```js ```js
export default { export default {
setup() { setup() {
const list = [...Array(50).keys()]; const list = [...Array(50).keys()];
return { list };
}, },
}; };
``` ```
```css ### 设置滚动目标
.custom {
width: 200px;
line-height: 40px;
text-align: center;
}
```
### 设置监听目标 可以通过 `target` 属性来设置触发滚动的目标对象，支持传入选择器或 `HTMLElement`。
可以通过设置 `target` 控制监听哪个元素触发 Back Top。
```html ```html
<div class="container"> <div class="container">
<van-cell v-for="item in list" :key="item" :title="item" /> <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> </div>
<style>
.container {
height: 60vh;
overflow: auto;
}
</style>
``` ```
```js ```js
export default { export default {
setup() { setup() {
const list = [...Array(50).keys()]; const list = [...Array(50).keys()];
return { list };
}, },
}; };
``` ```
```css
.container {
height: 300px;
overflow: auto;
}
```
## API ## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| target | 触发滚动的目标对象，支持`selector`和`HTMLElement` | _string \| HTMLElement_ | - | | target | 触发滚动的目标对象，支持传入选择器或 `HTMLElement` | _string \| HTMLElement_ | - |
| right | 距离页面右侧的距离，默认单位为 `px` | _number \| string_ | `30` | | right | 距离页面右侧的距离，默认单位为 `px` | _number \| string_ | `30` |
| bottom | 距离页面底部的距离，默认单位为 `px` | _number \| string_ | `40` | | bottom | 距离页面底部的距离，默认单位为 `px` | _number \| string_ | `40` |
| visibility-height | 滚动高度达到此参数值才显示 | _number_ | `200` | | visibility-height | 滚动高度达到此参数值才显示 | _number_ | `200` |
@ -105,6 +124,14 @@ export default {
| ------- | ------------------ | | ------- | ------------------ |
| default | 自定义按钮显示内容 | | default | 自定义按钮显示内容 |
### 类型定义
组件导出以下类型定义：
```ts
import type { BackTopProps, BackTopThemeVars } from 'vant';
```
## 主题定制 ## 主题定制
### 样式变量 ### 样式变量

35
packages/vant/src/back-top/demo/index.vue
View File

@ -8,50 +8,61 @@ import { useTranslate } from '../../../docs/site';
const t = useTranslate({ const t = useTranslate({
'zh-CN': { 'zh-CN': {
backTop: '返回顶部',
customContent: '自定义内容', customContent: '自定义内容',
setScrollTarget: '设置监听目标', customPosition: '自定义位置',
setScrollTarget: '设置滚动目标',
}, },
'en-US': { 'en-US': {
backTop: 'Back Top',
customContent: 'Custom Content', customContent: 'Custom Content',
customPosition: 'Custom Position',
setScrollTarget: 'Set Scroll Target', setScrollTarget: 'Set Scroll Target',
}, },
}); });
const activeTab = ref(0);
const list = [...Array(50).keys()]; const list = [...Array(50).keys()];
const targetEl = ref<HTMLElement>(); const targetEl = ref<HTMLElement>();
</script> </script>
<template> <template>
<van-tabs> <van-tabs v-model:active="activeTab">
<van-tab :title="t('basicUsage')"> <van-tab :title="t('basicUsage')">
<van-cell v-for="item in list" :key="item" :title="item" /> <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>
<van-tab :title="t('customContent')"> <van-tab :title="t('customContent')">
<van-cell v-for="item in list" :key="item" :title="item" /> <van-cell v-for="item in list" :key="item" :title="item" />
<van-back-top bottom="100" right="30"> <van-back-top v-if="activeTab === 2" class="custom-back-top">
<div class="custom">{{ t('customContent') }}</div> {{ t('backTop') }}
</van-back-top> </van-back-top>
</van-tab> </van-tab>
<van-tab :title="t('setScrollTarget')"> <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-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> </div>
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</template> </template>
<style lang="less"> <style lang="less">
.back-top--test { .back-top-wrapper {
height: 400px; height: 60vh;
overflow: auto; overflow: auto;
} }
.custom {
width: 200px; .custom-back-top {
line-height: 40px; width: 80px;
font-size: 14px;
text-align: center; text-align: center;
} }
</style> </style>

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

@ -10,8 +10,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-width: var(--van-back-top-size); width: var(--van-back-top-size);
min-height: var(--van-back-top-size); height: var(--van-back-top-size);
cursor: pointer; cursor: pointer;
color: var(--van-back-top-text-color); color: var(--van-back-top-text-color);
border-radius: var(--van-radius-max); border-radius: var(--van-radius-max);
@ -21,14 +21,14 @@
background-color: var(--van-back-top-background); background-color: var(--van-back-top-background);
&:active { &:active {
opacity: 0.6; opacity: var(--van-active-opacity);
} }
&--active { &--active {
transform: scale(1); transform: scale(1);
} }
.van-icon { &__icon {
font-size: var(--van-back-top-icon-size); font-size: var(--van-back-top-icon-size);
font-weight: var(--van-font-bold); font-weight: var(--van-font-bold);
} }

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

@ -26,7 +26,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-controls="van-tab" aria-controls="van-tab"
> >
<span class="van-tab__text van-tab__text--ellipsis"> <span class="van-tab__text van-tab__text--ellipsis">
Custom Content Custom Position
</span> </span>
</div> </div>
<div id="van-tabs-2" <div id="van-tabs-2"
@ -35,6 +35,17 @@ exports[`should render demo and match snapshot 1`] = `
tabindex="-1" tabindex="-1"
aria-selected="false" aria-selected="false"
aria-controls="van-tab" 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"> <span class="van-tab__text van-tab__text--ellipsis">
Set Scroll Target Set Scroll Target
@ -421,6 +432,14 @@ exports[`should render demo and match snapshot 1`] = `
style="display: none;" style="display: none;"
> >
</div> </div>
<div id="van-tab"
role="tabpanel"
class="van-tab__panel"
tabindex="-1"
aria-labelledby="van-tabs-3"
style="display: none;"
>
</div>
</div> </div>
</div> </div>
`; `;