diff --git a/packages/vant/src/back-top/BackTop.tsx b/packages/vant/src/back-top/BackTop.tsx
index e60348cdf..6e090cefa 100644
--- a/packages/vant/src/back-top/BackTop.tsx
+++ b/packages/vant/src/back-top/BackTop.tsx
@@ -12,6 +12,7 @@ import {
// Utils
import {
+ addUnit,
isObject,
inBrowser,
getScrollTop,
@@ -56,8 +57,8 @@ export default defineComponent({
let target: Window | HTMLElement;
const backTopStyle = computed(() => ({
- right: `${props.right}px`,
- bottom: `${props.bottom}px`,
+ right: addUnit(props.right),
+ bottom: addUnit(props.bottom),
}));
const onClick = (event: MouseEvent) => {
diff --git a/packages/vant/src/back-top/README.md b/packages/vant/src/back-top/README.md
index df1800e06..254eaf16f 100644
--- a/packages/vant/src/back-top/README.md
+++ b/packages/vant/src/back-top/README.md
@@ -34,12 +34,12 @@ export default {
};
```
-### Customizations
+### Custom Content
```html
- Customizations
+ Custom Content
```
@@ -59,7 +59,7 @@ export default {
}
```
-### Target to be listened to.
+### Set Scroll Target
```html
@@ -87,29 +87,29 @@ export default {
### Props
-| 参数 | 说明 | 类型 | 默认值 |
+| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| target | Can be a `selector` or `HTMLElement` | _string \| HTMLElement_ | - |
-| right | Right distance of the page | _number \| string_ | `30` |
-| bottom | Bottom distance of the page | _number \| string_ | `40` |
+| 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` |
| visibility-height | The button will not show until the scroll height reaches this value | _number_ | `200` |
| teleport | Specifies a target element where BackTop will be mounted | _string \| Element_ | `body` |
### Slots
-| 名称 | 说明 |
+| Name | Description |
| ------- | ------------------------- |
| default | customize default content |
-## 主题定制
+## Theming
-### 样式变量
+### CSS Variables
-组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
-| 名称 | 默认值 | 描述 |
-| ------------------------- | ----------------- | ---- |
-| --van-back-top-size | _40px_ | - |
-| --van-back-top-icon-size | _20px_ | - |
-| --van-back-top-text-color | _#fff_ | - |
-| --van-back-top-background | _var(--van-blue)_ | - |
+| Name | Default Value | Description |
+| ------------------------- | ----------------- | ----------- |
+| --van-back-top-size | _40px_ | - |
+| --van-back-top-icon-size | _20px_ | - |
+| --van-back-top-text-color | _#fff_ | - |
+| --van-back-top-background | _var(--van-blue)_ | - |
diff --git a/packages/vant/src/back-top/README.zh-CN.md b/packages/vant/src/back-top/README.zh-CN.md
index 64a2c1e20..132f0a7d5 100644
--- a/packages/vant/src/back-top/README.zh-CN.md
+++ b/packages/vant/src/back-top/README.zh-CN.md
@@ -41,7 +41,7 @@ export default {
```html
- 自定义内容
+ 自定义内容
```
@@ -94,8 +94,8 @@ export default {
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| target | 触发滚动的目标对象,支持`selector`和`HTMLElement` | _string \| HTMLElement_ | - |
-| right | 距离页面右侧的距离 | _number \| string_ | `30` |
-| bottom | 距离页面底部的距离 | _number \| string_ | `40` |
+| right | 距离页面右侧的距离,默认单位为 `px` | _number \| string_ | `30` |
+| bottom | 距离页面底部的距离,默认单位为 `px` | _number \| string_ | `40` |
| visibility-height | 滚动高度达到此参数值才显示 | _number_ | `200` |
| teleport | 指定挂载的节点,等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | `body` |
diff --git a/packages/vant/src/back-top/demo/index.vue b/packages/vant/src/back-top/demo/index.vue
index 30a0237c0..f2f3770d6 100644
--- a/packages/vant/src/back-top/demo/index.vue
+++ b/packages/vant/src/back-top/demo/index.vue
@@ -8,14 +8,12 @@ import { useTranslate } from '../../../docs/site';
const t = useTranslate({
'zh-CN': {
- type1: '基础用法',
- type2: '自定义内容',
- type3: '设置监听目标',
+ customContent: '自定义内容',
+ setScrollTarget: '设置监听目标',
},
'en-US': {
- type1: 'Basic Usage',
- type2: 'Customizations',
- type3: 'Target',
+ customContent: 'Custom Content',
+ setScrollTarget: 'Set Scroll Target',
},
});
@@ -25,19 +23,19 @@ const targetEl = ref
();
-
+
-
+
- {{ t('type2') }}
+ {{ t('customContent') }}
-
+
diff --git a/packages/vant/src/back-top/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/back-top/test/__snapshots__/demo.spec.ts.snap
index bdb41fa7c..68d17fbf3 100644
--- a/packages/vant/src/back-top/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/back-top/test/__snapshots__/demo.spec.ts.snap
@@ -26,7 +26,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-controls="van-tab"
>
- Customizations
+ Custom Content
- Target
+ Set Scroll Target
{
+test('should allow to custom position by position prop', async () => {
+ const root = document.createElement('div');
mount(BackTop, {
props: {
right: 30,
bottom: 100,
+ teleport: root,
},
});
- const backTopEl = document.querySelector('.van-back-top') as HTMLDivElement;
+ const backTopEl = root.querySelector('.van-back-top')!;
expect(backTopEl.style.right).toBe('30px');
expect(backTopEl.style.bottom).toBe('100px');
});
-test('test backTop event', async () => {
- const wrapper = mount(BackTop);
-
- await wrapper.trigger('click');
- expect(wrapper.emitted()).toBeDefined();
+test('should allow position prop to contain unit', async () => {
+ const root = document.createElement('div');
+ mount(BackTop, {
+ props: {
+ right: '2rem',
+ bottom: '4rem',
+ teleport: root,
+ },
+ });
+ const backTopEl = root.querySelector('.van-back-top')!;
+ expect(backTopEl.style.right).toBe('2rem');
+ expect(backTopEl.style.bottom).toBe('4rem');
+});
+
+test('should emit click event after clicked', async () => {
+ const windowScroll = jest.fn();
+ window.scrollTo = windowScroll;
+
+ const root = document.createElement('div');
+ const wrapper = mount(BackTop, {
+ props: {
+ teleport: root,
+ },
+ });
+ const backTopEl = root.querySelector('.van-back-top')!;
+ await nextTick();
+ await trigger(backTopEl, 'click');
+
+ expect(wrapper.emitted('click')?.length).toEqual(1);
+ expect(windowScroll).toHaveBeenCalledTimes(1);
});