From 3299fb6d3955880b444ed2e1ce1b5692d26a2c68 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 28 Jul 2019 10:36:25 +0800
Subject: [PATCH] [new feature] Dialog: add title slot (#3985)

---
 src/dialog/Dialog.js                          | 13 +++++-----
 src/dialog/README.md                          |  7 ++++++
 src/dialog/README.zh-CN.md                    |  9 +++++++
 .../test/__snapshots__/index.spec.js.snap     | 14 +++++++++++
 src/dialog/test/index.spec.js                 | 24 +++++++++++++++++++
 5 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/src/dialog/Dialog.js b/src/dialog/Dialog.js
index 490822474..323697bbf 100644
--- a/src/dialog/Dialog.js
+++ b/src/dialog/Dialog.js
@@ -78,16 +78,17 @@ export default createComponent({
       return;
     }
 
-    const { title, message, messageAlign } = this;
-    const children = this.slots();
+    const { message, messageAlign } = this;
+    const messageSlot = this.slots();
+    const title = this.slots('title') || this.title;
 
     const Title = title && (
-      <div class={bem('header', { isolated: !message && !children })}>{title}</div>
+      <div class={bem('header', { isolated: !message && !messageSlot })}>{title}</div>
     );
 
-    const Content = (children || message) && (
+    const Content = (messageSlot || message) && (
       <div class={bem('content')}>
-        {children || (
+        {messageSlot || (
           <div
             domPropsInnerHTML={message}
             class={bem('message', { 'has-title': title, [messageAlign]: messageAlign })}
@@ -131,7 +132,7 @@ export default createComponent({
         <div
           vShow={this.value}
           role="dialog"
-          aria-labelledby={title || message}
+          aria-labelledby={this.title || message}
           class={[bem(), this.className]}
         >
           {Title}
diff --git a/src/dialog/README.md b/src/dialog/README.md
index f92ac7bc2..a7c2de5c1 100644
--- a/src/dialog/README.md
+++ b/src/dialog/README.md
@@ -160,3 +160,10 @@ export default {
 |------|------|------|
 | confirm | Triggered when click confirm button | - |
 | cancel | Triggered when click cancel button | - |
+
+### Slots
+
+| Name | Description |
+|------|------|
+| default | Custom message |
+| title | Custom title |
diff --git a/src/dialog/README.zh-CN.md b/src/dialog/README.zh-CN.md
index 127894a91..4af4676aa 100644
--- a/src/dialog/README.zh-CN.md
+++ b/src/dialog/README.zh-CN.md
@@ -193,3 +193,12 @@ export default {
 |------|------|------|
 | confirm | 点击确认按钮时触发 | - |
 | cancel | 点击取消按钮时触发 | - |
+
+### Slots
+
+通过组件调用 `Dialog` 时，支持以下插槽：
+
+| 名称 | 说明 |
+|------|------|
+| default | 自定义内容 |
+| title | 自定义标题 |
diff --git a/src/dialog/test/__snapshots__/index.spec.js.snap b/src/dialog/test/__snapshots__/index.spec.js.snap
index ff58c9d98..100a324a3 100644
--- a/src/dialog/test/__snapshots__/index.spec.js.snap
+++ b/src/dialog/test/__snapshots__/index.spec.js.snap
@@ -11,3 +11,17 @@ exports[`button text 1`] = `
   <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel"><span class="van-button__text">Custom cancel</span></button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"><span class="van-button__text">Custom confirm</span></button></div>
 </div>
 `;
+
+exports[`default slot 1`] = `
+<div role="dialog" class="van-dialog" name="van-dialog-bounce">
+  <div class="van-dialog__content">Custom Message</div>
+  <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm"><span class="van-button__text">确认</span></button></div>
+</div>
+`;
+
+exports[`title slot 1`] = `
+<div role="dialog" class="van-dialog" name="van-dialog-bounce">
+  <div class="van-dialog__header van-dialog__header--isolated">Custom Title</div>
+  <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm"><span class="van-button__text">确认</span></button></div>
+</div>
+`;
diff --git a/src/dialog/test/index.spec.js b/src/dialog/test/index.spec.js
index 8ad8d3a7a..509294545 100644
--- a/src/dialog/test/index.spec.js
+++ b/src/dialog/test/index.spec.js
@@ -102,3 +102,27 @@ test('button text', () => {
 test('dialog component', () => {
   expect(Dialog.Component).toEqual(DialogVue);
 });
+
+test('default slot', () => {
+  const wrapper = mount(DialogVue, {
+    propsData: {
+      value: true
+    },
+    scopedSlots: {
+      default: () => 'Custom Message'
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('title slot', () => {
+  const wrapper = mount(DialogVue, {
+    propsData: {
+      value: true
+    },
+    scopedSlots: {
+      title: () => 'Custom Title'
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});