From 0fe98743791a2389eea825bd19e079fa2a44e5f8 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 25 Sep 2019 14:50:48 +0800
Subject: [PATCH] feat(Overlay): add default slot (#4571)

---
 src/overlay/README.md                           | 17 ++++++++---------
 src/overlay/README.zh-CN.md                     | 17 ++++++++---------
 src/overlay/demo/index.vue                      |  5 +----
 src/overlay/index.tsx                           |  4 +++-
 .../test/__snapshots__/index.spec.js.snap       |  2 ++
 src/overlay/test/index.spec.js                  | 10 ++++++++++
 6 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/src/overlay/README.md b/src/overlay/README.md
index ca56c0d4a..64f056df7 100644
--- a/src/overlay/README.md
+++ b/src/overlay/README.md
@@ -14,16 +14,9 @@ Vue.use(Overlay);
 ### Basic Usage
 
 ```html
-<van-button
-  type="primary"
-  text="Show Overlay"
-  @click="show = true"
-/>
+<van-button type="primary" text="Show Overlay" @click="show = true" />
 
-<van-overlay
-  :show="show"
-  @click="show = false"
-/>
+<van-overlay :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 |
diff --git a/src/overlay/README.zh-CN.md b/src/overlay/README.zh-CN.md
index 5ad0c57ca..f09fcc3fc 100644
--- a/src/overlay/README.zh-CN.md
+++ b/src/overlay/README.zh-CN.md
@@ -18,16 +18,9 @@ Vue.use(Overlay);
 ### 基础用法
 
 ```html
-<van-button
-  type="primary"
-  text="显示遮罩层"
-  @click="show = true"
-/>
+<van-button type="primary" text="显示遮罩层" @click="show = true" />
 
-<van-overlay
-  :show="show"
-  @click="show = false"
-/>
+<van-overlay :show="show" @click="show = false" />
 ```
 
 ```js
@@ -56,3 +49,9 @@ export default {
 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
 | click | 点击时触发 | event: Event |
+
+### Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 默认插槽 |
diff --git a/src/overlay/demo/index.vue b/src/overlay/demo/index.vue
index 113571c7b..917e362dd 100644
--- a/src/overlay/demo/index.vue
+++ b/src/overlay/demo/index.vue
@@ -8,10 +8,7 @@
         @click="show = true"
       />
 
-      <van-overlay
-        :show="show"
-        @click="show = false"
-      />
+      <van-overlay :show="show" @click="show = false" />
     </demo-block>
   </demo-section>
 </template>
diff --git a/src/overlay/index.tsx b/src/overlay/index.tsx
index 57c9f5a33..ccad92349 100644
--- a/src/overlay/index.tsx
+++ b/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>
   );
 }
diff --git a/src/overlay/test/__snapshots__/index.spec.js.snap b/src/overlay/test/__snapshots__/index.spec.js.snap
index 6af6f94ee..5f30aa06b 100644
--- a/src/overlay/test/__snapshots__/index.spec.js.snap
+++ b/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>`;
diff --git a/src/overlay/test/index.spec.js b/src/overlay/test/index.spec.js
index 83101620a..18a069c81 100644
--- a/src/overlay/test/index.spec.js
+++ b/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();
+});