docs(Overlay): add embedded content demo (#4982)

src/overlay/README.md

@@ -29,6 +29,31 @@ export default {
 },
 ```
 
+### Embedded Content
+
+```html
+<van-overlay :show="show" @click="show = false">
+  <div class="wrapper" @click.stop>
+    <div class="block" />
+  </div>
+</van-overlay>
+
+<style>
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.block {
+  width: 120px;
+  height: 120px;
+  background-color: #fff;
+}
+</style>
+```
+
 ## API
 
 ### Props

src/overlay/README.zh-CN.md

@@ -33,6 +33,33 @@ export default {
 },
 ```
 
+### 嵌入内容
+
+通过默认插槽可以在遮罩层上嵌入任意内容
+
+```html
+<van-overlay :show="show" @click="show = false">
+  <div class="wrapper" @click.stop>
+    <div class="block" />
+  </div>
+</van-overlay>
+
+<style>
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.block {
+  width: 120px;
+  height: 120px;
+  background-color: #fff;
+}
+</style>
+```
+
 ## API
 
 ### Props

src/overlay/demo/index.vue

@@ -10,6 +10,21 @@
 
       <van-overlay :show="show" @click="show = false" />
     </demo-block>
+
+    <demo-block :title="$t('embeddedContent')">
+      <van-button
+        type="primary"
+        :text="$t('embeddedContent')"
+        style="margin-left: 16px;"
+        @click="showEmbedded = true"
+      />
+
+      <van-overlay :show="showEmbedded" @click="showEmbedded = false">
+        <div class="wrapper">
+          <div class="block" />
+        </div>
+      </van-overlay>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -17,17 +32,37 @@
 export default {
   i18n: {
     'zh-CN': {
-      showOverlay: '显示遮罩层'
+      showOverlay: '显示遮罩层',
+      embeddedContent: '嵌入内容'
     },
     'en-US': {
-      showOverlay: 'Show Overlay'
+      showOverlay: 'Show Overlay',
+      embeddedContent: 'Embedded Content'
     }
   },
 
   data() {
     return {
-      show: false
+      show: false,
+      showEmbedded: false
     };
   }
 };
 </script>
+
+<style lang="less">
+.demo-overlay {
+  .wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+
+  .block {
+    width: 120px;
+    height: 120px;
+    background-color: #fff;
+  }
+}
+</style>

src/overlay/test/__snapshots__/demo.spec.js.snap

@@ -5,5 +5,12 @@ exports[`renders demo correctly 1`] = `
   <div><button class="van-button van-button--primary van-button--normal" style="margin-left: 16px;"><span class="van-button__text">显示遮罩层</span></button>
     <div class="van-overlay" style="z-index: 1; display: none;" name="van-fade"></div>
   </div>
+  <div><button class="van-button van-button--primary van-button--normal" style="margin-left: 16px;"><span class="van-button__text">嵌入内容</span></button>
+    <div class="van-overlay" style="z-index: 1; display: none;" name="van-fade">
+      <div class="wrapper">
+        <div class="block"></div>
+      </div>
+    </div>
+  </div>
 </div>
 `;