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

src/overlay/README.md

@@ -14,16 +14,9 @@ Vue.use(Overlay);
 ### Basic Usage
 
 ```html
-<van-button
+<van-button type="primary" text="Show Overlay" @click="show = true" />
-  type="primary"
-  text="Show Overlay"
-  @click="show = true"
-/>
 
-<van-overlay
+<van-overlay :show="show" @click="show = false" />
-  :show="show"
-  @click="show = false"
-/>
 ```
 
 ```js
@@ -52,3 +45,9 @@ export default {
 | Event | Description | Arguments |
 |------|------|------|
 | click | Triggered when clicked | event: Event |
+
+### Slots
+
+| Name | Description |
+|------|------|
+| default | Default slot |

src/overlay/README.zh-CN.md

@@ -18,16 +18,9 @@ Vue.use(Overlay);
 ### 基础用法
 
 ```html
-<van-button
+<van-button type="primary" text="显示遮罩层" @click="show = true" />
-  type="primary"
-  text="显示遮罩层"
-  @click="show = true"
-/>
 
-<van-overlay
+<van-overlay :show="show" @click="show = false" />
-  :show="show"
-  @click="show = false"
-/>
 ```
 
 ```js
@@ -56,3 +49,9 @@ export default {
 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
 | click | 点击时触发 | event: Event |
+
+### Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 默认插槽 |

src/overlay/demo/index.vue

@@ -8,10 +8,7 @@
         @click="show = true"
       />
 
-      <van-overlay
+      <van-overlay :show="show" @click="show = false" />
-        :show="show"
-        @click="show = false"
-      />
     </demo-block>
   </demo-section>
 </template>

src/overlay/index.tsx

@@ -47,7 +47,9 @@ function Overlay(
         class={[bem(), props.className]}
         onTouchmove={preventTouchMove}
         {...inherit(ctx, true)}
-      />
+      >
+        {slots.default && slots.default()}
+      </div>
     </transition>
   );
 }

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

@@ -2,6 +2,8 @@
 
 exports[`class-name prop 1`] = `<div class="van-overlay my-overlay" style="z-index: 1;" name="van-fade"></div>`;
 
+exports[`default slot 1`] = `<div class="van-overlay" style="z-index: 1; display: none;" name="van-fade">Custom Default</div>`;
+
 exports[`duration prop 1`] = `<div class="van-overlay" style="z-index: 1; animation-duration: 1s;" name="van-fade"></div>`;
 
 exports[`z-index prop 1`] = `<div class="van-overlay" style="z-index: 99;" name="van-fade"></div>`;

src/overlay/test/index.spec.js

@@ -47,3 +47,13 @@ test('click event', () => {
   wrapper.trigger('click');
   expect(onClick).toHaveBeenCalledTimes(1);
 });
+
+test('default slot', () => {
+  const wrapper = mount(Overlay, {
+    scopedSlots: {
+      default: () => 'Custom Default'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});