feat(BackTop): allow dynamically set target prop (#11311)

packages/vant/src/back-top/BackTop.tsx

@@ -1,5 +1,6 @@
 import {
   ref,
+  watch,
   computed,
   Teleport,
   nextTick,
@@ -55,8 +56,6 @@ export default defineComponent({
     const root = ref<HTMLElement>();
     const scrollParent = ref<Window | Element>();
 
-    let target: Window | Element | undefined;
-
     const style = computed(() => ({
       right: addUnit(props.right),
       bottom: addUnit(props.bottom),
@@ -64,14 +63,16 @@ export default defineComponent({
 
     const onClick = (event: MouseEvent) => {
       emit('click', event);
-      target?.scrollTo({
+      scrollParent.value?.scrollTo({
         top: 0,
         behavior: 'smooth',
       });
     };
 
     const scroll = () => {
-      show.value = target ? getScrollTop(target) >= props.offset : false;
+      show.value = scrollParent.value
+        ? getScrollTop(scrollParent.value) >= props.offset
+        : false;
     };
 
     const getTarget = () => {
@@ -94,16 +95,21 @@ export default defineComponent({
       }
     };
 
+    const updateTarget = () => {
+      if (inBrowser) {
+        nextTick(() => {
+          scrollParent.value = props.target
+            ? getTarget()
+            : getScrollParent(root.value!);
+          scroll();
+        });
+      }
+    };
+
     useEventListener('scroll', throttle(scroll, 100), { target: scrollParent });
 
-    onMounted(() => {
-      nextTick(() => {
-        if (inBrowser) {
-          target = props.target ? getTarget() : getScrollParent(root.value!);
-          scrollParent.value = target;
-        }
-      });
-    });
+    onMounted(updateTarget);
+    watch(() => props.target, updateTarget);
 
     return () => {
       const Content = (

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

@@ -110,10 +110,10 @@ export default {
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
-| target | Can be a `selector` or `HTMLElement` | _string \| HTMLElement_ | - |
+| target | Can be a selector or a DOM ELement | _string \| HTMLElement_ | - |
 | 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` |
-| offset | The button will not show until the scroll height reaches this value | _number_ | `200` |
+| offset | The component will not display until the scroll offset reaches this value | _number_ | `200` |
 | teleport | Specifies a target element where BackTop will be mounted | _string \| Element_ | `body` |
 
 ### Slots

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

@@ -112,10 +112,10 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| target | 触发滚动的目标对象，支持传入选择器或 `HTMLElement` | _string \| HTMLElement_ | - |
+| target | 触发滚动的目标对象，支持传入选择器或 DOM 元素 | _string \| HTMLElement_ | - |
 | right | 距离页面右侧的距离，默认单位为 `px` | _number \| string_ | `30` |
 | bottom | 距离页面底部的距离，默认单位为 `px` | _number \| string_ | `40` |
-| offset | 滚动高度达到此参数值才显示 | _number_ | `200` |
+| offset | 滚动高度达到此参数值时才显示组件 | _number_ | `200` |
 | teleport | 指定挂载的节点，等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | `body` |
 
 ### Slots