feat(BackTop): support css variable and prop of z-index (#11582)

* feat(BackTop): support css variable and prop of z-index

* docs: update README

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

@@ -13,10 +13,12 @@ import {
 
 // Utils
 import {
+  extend,
   addUnit,
   inBrowser,
   numericProp,
   getScrollTop,
+  getZIndexStyle,
   createNamespace,
   makeNumericProp,
 } from '../utils';
@@ -33,6 +35,7 @@ const [name, bem] = createNamespace('back-top');
 export const backTopProps = {
   right: numericProp,
   bottom: numericProp,
+  zIndex: numericProp,
   target: [String, Object] as PropType<TeleportProps['to']>,
   offset: makeNumericProp(200),
   immediate: Boolean,
@@ -58,10 +61,12 @@ export default defineComponent({
     const root = ref<HTMLElement>();
     const scrollParent = ref<Window | Element>();
 
-    const style = computed(() => ({
-      right: addUnit(props.right),
-      bottom: addUnit(props.bottom),
-    }));
+    const style = computed(() =>
+      extend(getZIndexStyle(props.zIndex), {
+        right: addUnit(props.right),
+        bottom: addUnit(props.bottom),
+      })
+    );
 
     const onClick = (event: MouseEvent) => {
       emit('click', event);

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

@@ -126,6 +126,7 @@ Add `immediate` prop to scroll to top immediately.
 | 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` |
 | immediate `v4.0.9` | Whether to scroll to top immediately | _boolean_ | `false` |
+| z-index | Set the z-index to a fixed value | _number \| string_ | `100` |
 
 ### Events
 
@@ -157,5 +158,8 @@ The component provides the following CSS variables, which can be used to customi
 | ------------------------- | ----------------- | ----------- |
 | --van-back-top-size       | _40px_            | -           |
 | --van-back-top-icon-size  | _20px_            | -           |
+| --van-back-top-right      | _30px_            | -           |
+| --van-back-top-bottom     | _40px_            | -           |
+| --van-back-top-z-index    | _100_             | -           |
 | --van-back-top-text-color | _#fff_            | -           |
 | --van-back-top-background | _var(--van-blue)_ | -           |

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

@@ -128,6 +128,7 @@ export default {
 | offset | 滚动高度达到此参数值时才显示组件 | _number_ | `200` |
 | teleport | 指定挂载的节点，等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | `body` |
 | immediate `v4.0.9` | 是否瞬间滚动到顶部 | _boolean_ | `false` |
+| z-index | 设置组件的 z-index 层级 | _number \| string_ | `100` |
 
 ### Events
 
@@ -161,5 +162,6 @@ import type { BackTopProps, BackTopThemeVars } from 'vant';
 | --van-back-top-icon-size  | _20px_            | -    |
 | --van-back-top-right      | _30px_            | -    |
 | --van-back-top-bottom     | _40px_            | -    |
+| --van-back-top-z-index    | _100_             | -    |
 | --van-back-top-text-color | _#fff_            | -    |
 | --van-back-top-background | _var(--van-blue)_ | -    |

packages/vant/src/back-top/index.less

@@ -2,6 +2,7 @@
   --van-back-top-size: 40px;
   --van-back-top-right: 30px;
   --van-back-top-bottom: 40px;
+  --van-back-top-z-index: 100;
   --van-back-top-icon-size: 20px;
   --van-back-top-text-color: #fff;
   --van-back-top-background: var(--van-blue);
@@ -16,6 +17,7 @@
   height: var(--van-back-top-size);
   right: var(--van-back-top-right);
   bottom: var(--van-back-top-bottom);
+  z-index: var(--van-back-top-z-index);
   cursor: pointer;
   color: var(--van-back-top-text-color);
   border-radius: var(--van-radius-max);

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

@@ -8,12 +8,14 @@ test('should allow to custom position by position prop', async () => {
     props: {
       right: 30,
       bottom: 100,
+      zIndex: 200,
       teleport: root,
     },
   });
   const backTopEl = root.querySelector<HTMLDivElement>('.van-back-top')!;
   expect(backTopEl.style.right).toBe('30px');
   expect(backTopEl.style.bottom).toBe('100px');
+  expect(backTopEl.style.zIndex).toBe('200');
 });
 
 test('should allow position prop to contain unit', async () => {

packages/vant/src/back-top/types.ts

@@ -1,5 +1,8 @@
 export type BackTopThemeVars = {
   backTopSize?: string;
+  backTopRight?: string;
+  backTopBottom?: string;
+  backTopZIndex?: number | string;
   backTopIconSize?: string;
   backTopTextColor?: string;
   backTopBackground?: string;