Message: add 'message' support for VNode

Author: jerrebm

examples/docs/en-US/message.md

@@ -5,6 +5,16 @@
         this.$message('This is a message.');
       },
 
+      openVn() {
+        const h = this.$createElement;
+        this.$message({
+          message: h('p', null, [
+            h('span', null, 'Message can be '),
+            h('i', { style: 'color: teal' }, 'VNode')
+          ])
+        });
+      },
+
       open2() {
         this.$message({
           message: 'Congrats, this is a success message.',
@@ -65,18 +75,29 @@ Used to show feedback after an activity. The difference with Notification is tha
 
 Displays at the top, and disappears after 3 seconds.
 
-:::demo The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a `$message` method for invoking. Message can take a string as parameter, and it will be shown as the main body.
+:::demo The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a `$message` method for invoking. Message can take a string or VNode as parameter, and it will be shown as the main body.
 
 ```html
 <template>
   <el-button :plain="true" @click="open">Show message</el-button>
+  <el-button :plain="true" @click="openVn">VNode</el-button>
 </template>
 
 <script>
   export default {
     methods: {
       open() {
         this.$message('This is a message.');
+      },
+      
+      openVn() {
+        const h = this.$createElement;
+        this.$message({
+          message: h('p', null, [
+            h('span', null, 'Message can be '),
+            h('i', { style: 'color: teal' }, 'VNode')
+          ])
+        });
       }
     }
   }
@@ -196,7 +217,7 @@ You can call `Message.closeAll()` to manually close all the instances.
 ### Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| message | message text | string | — | — |
+| message | message text | string / VNode | — | — |
 | type | message type | string | success/warning/info/error | info |
 | iconClass | custom icon's class, overrides `type` | string | — | — |
 | customClass | custom class name for Message | string | — | — |

examples/docs/zh-CN/message.md

@@ -5,6 +5,16 @@
         this.$message('这是一条消息提示');
       },
 
+      openVn() {
+        const h = this.$createElement;
+        this.$message({
+          message: h('p', null, [
+            h('span', null, '内容可以是 '),
+            h('i', { style: 'color: teal' }, 'VNode')
+          ])
+        });
+      },
+
       open2() {
         this.$message({
           message: '恭喜你，这是一条成功消息',
@@ -70,13 +80,24 @@
 ```html
 <template>
   <el-button :plain="true" @click="open">打开消息提示</el-button>
+  <el-button :plain="true" @click="openVn">VNode</el-button>
 </template>
 
 <script>
   export default {
     methods: {
       open() {
         this.$message('这是一条消息提示');
+      },
+
+      openVn() {
+        const h = this.$createElement;
+        this.$message({
+          message: h('p', null, [
+            h('span', null, '内容可以是 '),
+            h('i', { style: 'color: teal' }, 'VNode')
+          ])
+        });
       }
     }
   }
@@ -196,7 +217,7 @@ import { Message } from 'element-ui';
 ### Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| message | 消息文字 | string | — | — |
+| message | 消息文字 | string / VNode | — | — |
 | type | 主题 | string | success/warning/info/error | info |
 | iconClass | 自定义图标的类名，会覆盖 `type` | string | — | — |
 | customClass | 自定义类名 | string | — | — |

packages/message/src/main.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import { PopupManager } from 'element-ui/src/utils/popup';
+import { isVNode } from 'element-ui/src/utils/vdom';
 let MessageConstructor = Vue.extend(require('./main.vue'));
 
 let instance;
@@ -20,11 +21,14 @@ var Message = function(options) {
   options.onClose = function() {
     Message.close(id, userOnClose);
   };
-
   instance = new MessageConstructor({
     data: options
   });
   instance.id = id;
+  if (isVNode(instance.message)) {
+    instance.$slots.default = [instance.message];
+    instance.message = null;
+  }
   instance.vm = instance.$mount();
   document.body.appendChild(instance.vm.$el);
   instance.vm.visible = true;

packages/message/src/main.vue

@@ -8,7 +8,7 @@
       @mouseleave="startTimer">
       <img class="el-message__img" :src="typeImg" alt="" v-if="!iconClass">
       <div class="el-message__group" :class="{ 'is-with-icon': iconClass }">
-        <p><i class="el-message__icon" :class="iconClass" v-if="iconClass"></i>{{ message }}</p>
+        <slot><p><i class="el-message__icon" :class="iconClass" v-if="iconClass"></i>{{ message }}</p></slot>
         <div v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></div>
       </div>
     </div>