feat(BackTop): allow to set position with other units (#11270)

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`,
+      right: addUnit(props.right),
-      bottom: `${props.bottom}px`,
+      bottom: addUnit(props.bottom),
     }));
 
     const onClick = (event: MouseEvent) => {

packages/vant/src/back-top/README.md

@@ -34,12 +34,12 @@ export default {
 };
 ```
 
-### Customizations
+### Custom Content
 
 ```html
 <van-cell v-for="item in list" :key="item" :title="item" />
 <van-back-top>
-  <div class="custom" style="">Customizations</div>
+  <div class="custom">Custom Content</div>
 </van-back-top>
 ```
 
@@ -59,7 +59,7 @@ export default {
 }
 ```
 
-### Target to be listened to.
+### Set Scroll Target
 
 ```html
 <div class="container">
@@ -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` |
+| right | Right distance of the page, the default unit is px | _number \| string_ | `30` |
-| bottom | Bottom distance of the page | _number \| string_ | `40` |
+| 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).
 
-| 名称                      | 默认值            | 描述 |
+| Name                      | Default Value     | Description |
-| ------------------------- | ----------------- | ---- |
+| ------------------------- | ----------------- | ----------- |
-| --van-back-top-size       | _40px_            | -    |
+| --van-back-top-size       | _40px_            | -           |
-| --van-back-top-icon-size  | _20px_            | -    |
+| --van-back-top-icon-size  | _20px_            | -           |
-| --van-back-top-text-color | _#fff_            | -    |
+| --van-back-top-text-color | _#fff_            | -           |
-| --van-back-top-background | _var(--van-blue)_ | -    |
+| --van-back-top-background | _var(--van-blue)_ | -           |

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

@@ -41,7 +41,7 @@ export default {
 ```html
 <van-cell v-for="item in list" :key="item" :title="item" />
 <van-back-top>
-  <div class="custom" style="">自定义内容</div>
+  <div class="custom">自定义内容</div>
 </van-back-top>
 ```
 
@@ -94,8 +94,8 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | target | 触发滚动的目标对象，支持`selector`和`HTMLElement` | _string \| HTMLElement_ | - |
-| right | 距离页面右侧的距离 | _number \| string_ | `30` |
+| right | 距离页面右侧的距离，默认单位为 `px` | _number \| string_ | `30` |
-| bottom | 距离页面底部的距离 | _number \| string_ | `40` |
+| 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` |
 

packages/vant/src/back-top/demo/index.vue

@@ -8,14 +8,12 @@ import { useTranslate } from '../../../docs/site';
 
 const t = useTranslate({
   'zh-CN': {
-    type1: '基础用法',
+    customContent: '自定义内容',
-    type2: '自定义内容',
+    setScrollTarget: '设置监听目标',
-    type3: '设置监听目标',
   },
   'en-US': {
-    type1: 'Basic Usage',
+    customContent: 'Custom Content',
-    type2: 'Customizations',
+    setScrollTarget: 'Set Scroll Target',
-    type3: 'Target',
   },
 });
 
@@ -25,19 +23,19 @@ const targetEl = ref<HTMLElement>();
 
 <template>
   <van-tabs>
-    <van-tab :title="t('type1')">
+    <van-tab :title="t('basicUsage')">
       <van-cell v-for="item in list" :key="item" :title="item" />
       <van-back-top />
     </van-tab>
 
-    <van-tab :title="t('type2')">
+    <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" style="">{{ t('type2') }}</div>
+        <div class="custom">{{ t('customContent') }}</div>
       </van-back-top>
     </van-tab>
 
-    <van-tab :title="t('type3')">
+    <van-tab :title="t('setScrollTarget')">
       <div class="back-top--test" ref="targetEl">
         <van-cell v-for="item in list" :key="item" :title="item" />
         <van-back-top :target="targetEl" bottom="150" right="30" />

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"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
-          Customizations
+          Custom Content
         </span>
       </div>
       <div id="van-tabs-2"
@@ -37,7 +37,7 @@ exports[`should render demo and match snapshot 1`] = `
            aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
-          Target
+          Set Scroll Target
         </span>
       </div>
       <div class="van-tabs__line"

packages/vant/src/back-top/test/index.spec.ts

@@ -1,21 +1,49 @@
+import { nextTick } from 'vue';
 import BackTop from '..';
-import { mount } from '../../../test';
+import { mount, trigger } from '../../../test';
 
-test('test position prop', async () => {
+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<HTMLDivElement>('.van-back-top')!;
   expect(backTopEl.style.right).toBe('30px');
   expect(backTopEl.style.bottom).toBe('100px');
 });
 
-test('test backTop event', async () => {
+test('should allow position prop to contain unit', async () => {
-  const wrapper = mount(BackTop);
+  const root = document.createElement('div');
-
+  mount(BackTop, {
-  await wrapper.trigger('click');
+    props: {
-  expect(wrapper.emitted()).toBeDefined();
+      right: '2rem',
+      bottom: '4rem',
+      teleport: root,
+    },
+  });
+  const backTopEl = root.querySelector<HTMLDivElement>('.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<HTMLDivElement>('.van-back-top')!;
+  await nextTick();
+  await trigger(backTopEl, 'click');
+
+  expect(wrapper.emitted('click')?.length).toEqual(1);
+  expect(windowScroll).toHaveBeenCalledTimes(1);
 });