feat(ConfigProvider): add z-index prop (#10915)

packages/vant/src/composables/use-global-z-index.ts

@@ -0,0 +1,24 @@
+/**
+ * The z-index of Popup components.
+
+ * Will affect this components:
+ *   - ActionSheet
+ *   - Calendar
+ *   - Dialog
+ *   - DropdownItem
+ *   - ImagePreview
+ *   - Notify
+ *   - Popup
+ *   - Popover
+ *   - ShareSheet
+ *   - Toast
+ */
+let globalZIndex = 2000;
+
+/** the global z-index is automatically incremented after reading */
+export const useGlobalZIndex = () => ++globalZIndex;
+
+/** reset the global z-index */
+export const setGlobalZIndex = (val: number) => {
+  globalZIndex = val;
+};

packages/vant/src/config-provider/ConfigProvider.tsx

@@ -1,6 +1,7 @@
 import {
   provide,
   computed,
+  watchEffect,
   defineComponent,
   type PropType,
   type InjectionKey,
@@ -13,6 +14,7 @@ import {
   createNamespace,
   type Numeric,
 } from '../utils';
+import { setGlobalZIndex } from '../composables/use-global-z-index';
 
 const [name, bem] = createNamespace('config-provider');
 
@@ -25,6 +27,7 @@ export const CONFIG_PROVIDER_KEY: InjectionKey<ConfigProviderProvide> =
 
 const configProviderProps = {
   tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),
+  zIndex: Number,
   themeVars: Object as PropType<Record<string, Numeric>>,
   iconPrefix: String,
 };
@@ -53,6 +56,12 @@ export default defineComponent({
 
     provide(CONFIG_PROVIDER_KEY, props);
 
+    watchEffect(() => {
+      if (props.zIndex !== undefined) {
+        setGlobalZIndex(props.zIndex);
+      }
+    });
+
     return () => (
       <props.tag class={bem()} style={style.value}>
         {slots.default?.()}

packages/vant/src/config-provider/README.md

@@ -2,7 +2,7 @@
 
 ### Intro
 
-Used to config the theme of Vant components.
+Used to config the theme and global properties of Vant components.
 
 ### Install
 
@@ -209,9 +209,10 @@ There are all **Basic Variables** below, for component CSS Variables, please ref
 ### Props
 
 | Attribute | Description | Type | Default |
-| -------------------- | ------------------------ | -------- | ---------- |
+| --- | --- | --- | --- |
 | theme-vars | Theme variables | _object_ | - |
 | tag `v3.1.2` | HTML Tag of root element | _string_ | `div` |
+| z-index `v3.6.0` | Set the z-index of all popup components, this property takes effect globally | _number_ | `2000` |
 | icon-prefix `v3.1.3` | Icon className prefix | _string_ | `van-icon` |
 
 ### Types

packages/vant/src/config-provider/README.zh-CN.md

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-用于配置 Vant 组件的主题样式，从 3.1.0 版本开始支持。
+用于配置 Vant 组件的主题样式和全局属性，从 3.1.0 版本开始支持。
 
 ### 引入
 
@@ -216,6 +216,7 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 | --- | --- | --- | --- |
 | theme-vars | 自定义主题变量 | _object_ | - |
 | tag `v3.1.2` | 根节点对应的 HTML 标签名 | _string_ | `div` |
+| z-index `v3.6.0` | 设置所有弹窗类组件的 z-index，该属性对全局生效 | _number_ | `2000` |
 | icon-prefix `v3.1.3` | 所有图标的类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 
 ### 类型定义

packages/vant/src/config-provider/test/index.spec.tsx

@@ -1,6 +1,8 @@
+import { ref } from 'vue';
 import { ConfigProvider } from '..';
 import { Icon } from '../../icon';
-import { mount } from '../../../test';
+import { later, mount } from '../../../test';
+import Popup from '../../popup';
 
 test('should render tag prop correctly', () => {
   const wrapper = mount(ConfigProvider, {
@@ -23,3 +25,19 @@ test('should change icon class-prefix when using icon-prefix prop', () => {
   });
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should change global z-index when using z-index prop', async () => {
+  const show = ref(true);
+  const wrapper = mount({
+    render() {
+      return (
+        <ConfigProvider zIndex={0}>
+          <Popup v-model:show={show.value} />
+        </ConfigProvider>
+      );
+    },
+  });
+
+  await later();
+  expect(wrapper.find('.van-popup').style.zIndex).toEqual('1');
+});

packages/vant/src/popup/Popup.tsx

@@ -31,6 +31,7 @@ import { useExpose } from '../composables/use-expose';
 import { useLockScroll } from '../composables/use-lock-scroll';
 import { useLazyRender } from '../composables/use-lazy-render';
 import { POPUP_TOGGLE_KEY } from '../composables/on-popup-reopen';
+import { useGlobalZIndex } from '../composables/use-global-z-index';
 
 // Components
 import { Icon } from '../icon';
@@ -56,8 +57,6 @@ export type PopupProps = ExtractPropTypes<typeof popupProps>;
 
 const [name, bem] = createNamespace('popup');
 
-let globalZIndex = 2000;
-
 export default defineComponent({
   name,
 
@@ -103,12 +102,10 @@ export default defineComponent({
 
     const open = () => {
       if (!opened) {
-        if (props.zIndex !== undefined) {
-          globalZIndex = +props.zIndex;
-        }
-
         opened = true;
-        zIndex.value = ++globalZIndex;
+
+        zIndex.value =
+          props.zIndex !== undefined ? +props.zIndex : useGlobalZIndex();
 
         emit('open');
       }

packages/vant/src/popup/test/index.spec.jsx

@@ -29,8 +29,8 @@ test('should change z-index when using z-index prop', async () => {
   });
 
   await nextTick();
-  expect(wrapper.find('.van-popup').style.zIndex).toEqual('11');
-  expect(wrapper.find('.van-overlay').style.zIndex).toEqual('11');
+  expect(wrapper.find('.van-popup').style.zIndex).toEqual('10');
+  expect(wrapper.find('.van-overlay').style.zIndex).toEqual('10');
 });
 
 test('should lock scroll when showed', async () => {