[new feature] Dialog: add title slot (#3985)

src/dialog/Dialog.js

@@ -78,16 +78,17 @@ export default createComponent({
       return;
     }
 
-    const { title, message, messageAlign } = this;
+    const { message, messageAlign } = this;
-    const children = this.slots();
+    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}

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 |

src/dialog/README.zh-CN.md

@@ -193,3 +193,12 @@ export default {
 |------|------|------|
 | confirm | 点击确认按钮时触发 | - |
 | cancel | 点击取消按钮时触发 | - |
+
+### Slots
+
+通过组件调用 `Dialog` 时，支持以下插槽：
+
+| 名称 | 说明 |
+|------|------|
+| default | 自定义内容 |
+| title | 自定义标题 |

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>
+`;

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();
+});