feat(Overlay): add default slot (#2466)

fix #2449

example/pages/overlay/index.js

@@ -2,12 +2,25 @@ import Page from '../../common/page';
 
 Page({
   data: {
-    show: false
+    show: false,
+    showEmbedded: false
   },
+
   onClickShow() {
     this.setData({ show: true });
   },
+
   onClickHide() {
     this.setData({ show: false });
-  }
+  },
+
+  onClickShowEmbedded() {
+    this.setData({ showEmbedded: true });
+  },
+
+  onClickHideEmbedded() {
+    this.setData({ showEmbedded: false });
+  },
+
+  noop() {}
 });

example/pages/overlay/index.wxml

@@ -2,5 +2,16 @@
   <van-button type="primary" bind:click="onClickShow">
     显示遮罩层
   </van-button>
-  <van-overlay show="{{ show }}" bind:click="onClickHide"/>
+  <van-overlay show="{{ show }}" bind:click="onClickHide" />
+</demo-block>
+
+<demo-block title="嵌入内容" padding>
+  <van-button type="primary" bind:click="onClickShowEmbedded">
+    嵌入内容
+  </van-button>
+  <van-overlay show="{{ showEmbedded }}" bind:click="onClickHideEmbedded">
+    <view class="wrapper">
+      <div class="block" catch:tap="noop" />
+    </view>
+  </van-overlay>
 </demo-block>

example/pages/overlay/index.wxss

@@ -1 +1,12 @@
-/* pages/overlay/index.wxss */
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.block {
+  width: 120px;
+  height: 120px;
+  background-color: #fff;
+}

packages/overlay/README.md

@@ -28,15 +28,63 @@ Page({
   data: {
     show: false
   },
+
   onClickShow() {
     this.setData({ show: true });
   },
+
   onClickHide() {
     this.setData({ show: false });
   }
 });
 ```
 
+### 嵌入内容
+
+通过默认插槽可以在遮罩层上嵌入任意内容
+
+```html
+<van-button type="primary" bind:click="onClickShow">嵌入内容</van-button>
+<van-overlay show="{{ show }}" bind:click="onClickHide">
+  <view class="wrapper">
+    <view class="block" catch:tap="noop" />
+  </view>
+</van-overlay>
+```
+
+```js
+Page({
+  data: {
+    show: false
+  },
+
+  onClickShow() {
+    this.setData({ show: true });
+  },
+
+  onClickHide() {
+    this.setData({ show: false });
+  },
+
+  noop() {}
+});
+```
+
+```css
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.block {
+  width: 120px;
+  height: 120px;
+  background-color: #fff;
+}
+```
+
 ### Props
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -52,3 +100,10 @@ Page({
 | 事件名 | 说明 | 回调参数 |
 |-----------|-----------|-----------|
 | bind:click | 点击时触发 | - |
+
+### Slots
+
+| 名称 | 说明 |
+|------|------|
+| - | 默认插槽，用于在遮罩层上方嵌入内容 |
+

packages/overlay/index.wxml

@@ -5,4 +5,6 @@
   duration="{{ duration }}"
   bind:tap="onClick"
   catch:touchmove="noop"
-/>
+>
+  <slot></slot>
+</van-transition>