From fb4a786249f0f5a84d8fbb022e5c85ed7145895e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?=
 <Leopoldthecoder@users.noreply.github.com>
Date: Tue, 2 May 2017 14:59:55 +0800
Subject: [PATCH] MessageBox: add 'message' support for VNode (#4550)

---
 examples/components/demo-block.vue  |  5 +++--
 examples/docs/en-US/message-box.md  | 12 ++++++++++--
 examples/docs/en-US/notification.md |  4 ++--
 examples/docs/zh-CN/message-box.md  | 14 +++++++++++---
 examples/docs/zh-CN/notification.md |  4 ++--
 packages/message-box/src/main.js    |  5 +++++
 packages/message-box/src/main.vue   |  4 +++-
 7 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/examples/components/demo-block.vue b/examples/components/demo-block.vue
index bea8ba3f6..f17bf4f46 100644
--- a/examples/components/demo-block.vue
+++ b/examples/components/demo-block.vue
@@ -151,6 +151,7 @@
 
 <script type="text/babel">
   import compoLang from '../i18n/component.json';
+  import { version } from 'main/index.js';
 
   export default {
     data() {
@@ -171,10 +172,10 @@
       goJsfiddle() {
         const { script, html, style } = this.jsfiddle;
         const resourcesTpl = '<scr' + 'ipt src="//unpkg.com/vue/dist/vue.js"></scr' + 'ipt>' +
-        '\n<scr' + 'ipt src="//unpkg.com/element-ui/lib/index.js"></scr' + 'ipt>';
+        '\n<scr' + `ipt src="//unpkg.com/element-ui@${ version }/lib/index.js"></scr` + 'ipt>';
         let jsTpl = (script || '').replace(/export default/, 'var Main =').trim();
         let htmlTpl = `${resourcesTpl}\n<div id="app">\n${html.trim()}\n</div>`;
-        let cssTpl = `@import url("//unpkg.com/element-ui/lib/theme-default/index.css");\n${(style || '').trim()}\n`;
+        let cssTpl = `@import url("//unpkg.com/element-ui@${ version }/lib/theme-default/index.css");\n${(style || '').trim()}\n`;
         jsTpl = jsTpl
           ? jsTpl + '\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount(\'#app\')'
           : 'new Vue().$mount(\'#app\')';
diff --git a/examples/docs/en-US/message-box.md b/examples/docs/en-US/message-box.md
index b6fd5a4ca..f1592a55b 100644
--- a/examples/docs/en-US/message-box.md
+++ b/examples/docs/en-US/message-box.md
@@ -59,9 +59,13 @@
       },
 
       open4() {
+        const h = this.$createElement;
         this.$msgbox({
           title: 'Message',
-          message: 'This is a message',
+          message: h('p', null, [
+            h('span', null, 'Message can be '),
+            h('i', { style: 'color: teal' }, 'VNode')
+          ]),
           showCancelButton: true,
           confirmButtonText: 'OK',
           cancelButtonText: 'Cancel',
@@ -219,9 +223,13 @@ Can be customized to show various content.
   export default {
     methods: {
       open4() {
+        const h = this.$createElement;
         this.$msgbox({
           title: 'Message',
-          message: 'This is a message',
+          message: h('p', null, [
+            h('span', null, 'Message can be '),
+            h('i', { style: 'color: teal' }, 'VNode')
+          ]),
           showCancelButton: true,
           confirmButtonText: 'OK',
           cancelButtonText: 'Cancel',
diff --git a/examples/docs/en-US/notification.md b/examples/docs/en-US/notification.md
index ca5034264..b6236b7c0 100644
--- a/examples/docs/en-US/notification.md
+++ b/examples/docs/en-US/notification.md
@@ -6,7 +6,7 @@
 
         this.$notify({
           title: 'Title',
-          message: h('p', { style: 'color: red' }, 'This is a reminder')
+          message: h('i', { style: 'color: teal' }, 'This is a reminder')
         });
       },
 
@@ -93,7 +93,7 @@ Displays a global notification message at the upper right corner of the page.
 
         this.$notify({
           title: 'Title',
-          message: h('p', { style: 'color: red' }, 'This is a reminder')
+          message: h('i', { style: 'color: teal' }, 'This is a reminder')
         });
       },
 
diff --git a/examples/docs/zh-CN/message-box.md b/examples/docs/zh-CN/message-box.md
index 1de456083..664e9af1b 100644
--- a/examples/docs/zh-CN/message-box.md
+++ b/examples/docs/zh-CN/message-box.md
@@ -60,9 +60,13 @@
 
 
       open4() {
+        const h = this.$createElement;
         this.$msgbox({
           title: '消息',
-          message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',
+          message: h('p', null, [
+            h('span', null, '内容可以是 '),
+            h('i', { style: 'color: teal' }, 'VNode')
+          ]),
           showCancelButton: true,
           confirmButtonText: '确定',
           cancelButtonText: '取消',
@@ -216,9 +220,13 @@
   export default {
     methods: {
       open4() {
+        const h = this.$createElement;
         this.$msgbox({
           title: '消息',
-          message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',
+          message: h('p', null, [
+            h('span', null, '内容可以是 '),
+            h('i', { style: 'color: teal' }, 'VNode')
+          ]),
           showCancelButton: true,
           confirmButtonText: '确定',
           cancelButtonText: '取消',
@@ -268,7 +276,7 @@ import { MessageBox } from 'element-ui';
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title | MessageBox 标题 | string | — | — |
-| message | MessageBox 消息正文内容 | string | — | — |
+| message | MessageBox 消息正文内容 | string / VNode | — | — |
 | type | 消息类型，用于显示图标 | string | success/info/warning/error | — |
 | customClass | MessageBox 的自定义类名 | string | — | — |
 | callback | 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 | function(action, instance)，action 的值为'confirm'或'cancel', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法 | — | — |
diff --git a/examples/docs/zh-CN/notification.md b/examples/docs/zh-CN/notification.md
index 180fb2618..4cbb9b5c3 100644
--- a/examples/docs/zh-CN/notification.md
+++ b/examples/docs/zh-CN/notification.md
@@ -6,7 +6,7 @@
 
         this.$notify({
           title: '标题名称',
-          message: h('p', { style: 'color: red'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
+          message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
         });
       },
 
@@ -94,7 +94,7 @@
 
         this.$notify({
           title: '标题名称',
-          message: h('p', { style: 'color: red'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
+          message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
         });
       },
 
diff --git a/packages/message-box/src/main.js b/packages/message-box/src/main.js
index b17a07c28..b21762ff4 100644
--- a/packages/message-box/src/main.js
+++ b/packages/message-box/src/main.js
@@ -29,6 +29,7 @@ const defaults = {
 import Vue from 'vue';
 import msgboxVue from './main.vue';
 import merge from 'element-ui/src/utils/merge';
+import { isVNode } from 'element-ui/src/utils/vdom';
 
 const MessageBoxConstructor = Vue.extend(msgboxVue);
 
@@ -97,6 +98,10 @@ const showNextMsg = () => {
         oldCb(action, instance);
         showNextMsg();
       };
+      if (isVNode(instance.message)) {
+        instance.$slots.default = [instance.message];
+        instance.message = null;
+      }
       ['modal', 'showClose', 'closeOnClickModal', 'closeOnPressEscape'].forEach(prop => {
         if (instance[prop] === undefined) {
           instance[prop] = true;
diff --git a/packages/message-box/src/main.vue b/packages/message-box/src/main.vue
index b7b8c4efe..a21a5d020 100644
--- a/packages/message-box/src/main.vue
+++ b/packages/message-box/src/main.vue
@@ -8,7 +8,9 @@
         </div>
         <div class="el-message-box__content" v-if="message !== ''">
           <div class="el-message-box__status" :class="[ typeClass ]"></div>
-          <div class="el-message-box__message" :style="{ 'margin-left': typeClass ? '50px' : '0' }"><p>{{ message }}</p></div>
+          <div class="el-message-box__message" :style="{ 'margin-left': typeClass ? '50px' : '0' }">
+            <slot><p>{{ message }}</p></slot>
+          </div>
           <div class="el-message-box__input" v-show="showInput">
             <el-input v-model="inputValue" @keyup.enter.native="handleAction('confirm')" :placeholder="inputPlaceholder" ref="input"></el-input>
             <div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{ editorErrorMessage }}</div>