MessageBox: add 'message' support for VNode (#4550)

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\')';

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',

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')
         });
       },
 

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 实例，可以通过它访问实例上的属性和方法 | — | — |

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'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
         });
       },
 

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;

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>