From 001e7b0b46561fcfe7daa68f6b05846e542bb6f3 Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Sat, 18 Nov 2023 21:28:32 +0800
Subject: [PATCH] docs(Overlay): add set z-index demo (#12454)

---
 packages/vant/src/overlay/README.md           |  8 ++++++++
 packages/vant/src/overlay/README.zh-CN.md     |  8 ++++++++
 packages/vant/src/overlay/demo/index.vue      | 13 ++++++++++++
 .../test/__snapshots__/demo-ssr.spec.ts.snap  | 14 +++++++++++++
 .../test/__snapshots__/demo.spec.ts.snap      | 20 +++++++++++++++++++
 5 files changed, 63 insertions(+)

diff --git a/packages/vant/src/overlay/README.md b/packages/vant/src/overlay/README.md
index 529d59e2b..269b650f0 100644
--- a/packages/vant/src/overlay/README.md
+++ b/packages/vant/src/overlay/README.md
@@ -61,6 +61,14 @@ export default {
 </style>
 ```
 
+### Setting z-index
+
+The default z-index level of the Overlay component is `1`. You can set its z-index level using the `z-index` prop.
+
+```html
+<van-overlay z-index="100" />
+```
+
 ## API
 
 ### Props
diff --git a/packages/vant/src/overlay/README.zh-CN.md b/packages/vant/src/overlay/README.zh-CN.md
index 05a4f9d23..9a0cf716c 100644
--- a/packages/vant/src/overlay/README.zh-CN.md
+++ b/packages/vant/src/overlay/README.zh-CN.md
@@ -63,6 +63,14 @@ export default {
 </style>
 ```
 
+### 设置 z-index
+
+Overlay 组件默认的 z-index 层级为 `1`，你可以通过 `z-index` 属性设置它的 z-index 层级。
+
+```html
+<van-overlay z-index="100" />
+```
+
 ## API
 
 ### Props
diff --git a/packages/vant/src/overlay/demo/index.vue b/packages/vant/src/overlay/demo/index.vue
index 1b97f6268..3aab06b98 100644
--- a/packages/vant/src/overlay/demo/index.vue
+++ b/packages/vant/src/overlay/demo/index.vue
@@ -6,10 +6,12 @@ import { useTranslate } from '../../../docs/site';
 
 const t = useTranslate({
   'zh-CN': {
+    setZIndex: '设置 z-index',
     showOverlay: '显示遮罩层',
     embeddedContent: '嵌入内容',
   },
   'en-US': {
+    setZIndex: 'Set z-index',
     showOverlay: 'Show Overlay',
     embeddedContent: 'Embedded Content',
   },
@@ -17,6 +19,7 @@ const t = useTranslate({
 
 const show = ref(false);
 const showEmbedded = ref(false);
+const showZIndex = ref(false);
 </script>
 
 <template>
@@ -43,6 +46,16 @@ const showEmbedded = ref(false);
       </div>
     </van-overlay>
   </demo-block>
+
+  <demo-block :title="t('setZIndex')">
+    <van-button
+      type="primary"
+      :text="t('setZIndex')"
+      style="margin-left: 16px"
+      @click="showZIndex = true"
+    />
+    <van-overlay :show="showZIndex" @click="showZIndex = false" z-index="100" />
+  </demo-block>
 </template>
 
 <style lang="less">
diff --git a/packages/vant/src/overlay/test/__snapshots__/demo-ssr.spec.ts.snap b/packages/vant/src/overlay/test/__snapshots__/demo-ssr.spec.ts.snap
index 345598c5c..547c5d8b9 100644
--- a/packages/vant/src/overlay/test/__snapshots__/demo-ssr.spec.ts.snap
+++ b/packages/vant/src/overlay/test/__snapshots__/demo-ssr.spec.ts.snap
@@ -30,4 +30,18 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </button>
 </div>
+<div>
+  <!--[-->
+  <button
+    type="button"
+    class="van-button van-button--primary van-button--normal"
+    style="margin-left:16px;"
+  >
+    <div class="van-button__content">
+      <span class="van-button__text">
+        Set z-index
+      </span>
+    </div>
+  </button>
+</div>
 `;
diff --git a/packages/vant/src/overlay/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/overlay/test/__snapshots__/demo.spec.ts.snap
index def8d5f59..bffe60e3e 100644
--- a/packages/vant/src/overlay/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/overlay/test/__snapshots__/demo.spec.ts.snap
@@ -41,4 +41,24 @@ exports[`should render demo and match snapshot 1`] = `
   >
   </transition-stub>
 </div>
+<div>
+  <button
+    type="button"
+    class="van-button van-button--primary van-button--normal"
+    style="margin-left: 16px;"
+  >
+    <div class="van-button__content">
+      <span class="van-button__text">
+        Set z-index
+      </span>
+    </div>
+  </button>
+  <transition-stub
+    name="van-fade"
+    appear="true"
+    persisted="false"
+    css="true"
+  >
+  </transition-stub>
+</div>
 `;