Message & Notification: add iconClass and customClass, fixed #1664 (#1671)

examples/docs/en-US/message.md

@@ -197,6 +197,8 @@ In this case you should call `Message(options)`. We have also registered methods
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | message | message text | string | — | — |
 | type | message type | string | success/warning/info/error | info |
+| iconClass | custom icon's class, overrides `type` | string | — | — |
+| customClass | custom class name for Message | string | — | — |
 | duration | display duration, millisecond. If set to 0, it will not turn off automatically | number | — | 3000 |
 | showClose | whether to show a close button | boolean | — | false |
 | onClose | callback function when closed with the message instance as the parameter | function | — | — |

examples/docs/en-US/notification.md

@@ -222,6 +222,8 @@ In this case you should call `Notification(options)`. We have also registered me
 | title | title | string | — | — |
 | message | description text | string | — | — |
 | type | notification type | string | success/warning/info/error | — |
+| iconClass | custom icon's class. It will be overridden by `type` | string | — | — |
+| customClass | custom class name for Notification | string | — | — |
 | duration | duration before close. It will not automatically close if set 0 | number | — | 4500 |
 | onClose | callback function when closed | function | — | — |
 | offset | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | number | — | 0 |

examples/docs/zh-CN/message.md

@@ -197,6 +197,8 @@ import { Message } from 'element-ui';
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | message | 消息文字 | string | — | — |
 | type | 主题 | string | success/warning/info/error | info |
+| iconClass | 自定义图标的类名，会覆盖 `type` | string | — | — |
+| customClass | 自定义类名 | string | — | — |
 | duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 3000 |
 | showClose | 是否显示关闭按钮 | boolean | — | false |
 | onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | — |

examples/docs/zh-CN/notification.md

@@ -224,6 +224,8 @@ import { Notification } from 'element-ui';
 | title | 标题 | string | — | — |
 | message | 说明文字 | string | — | — |
 | type | 主题样式，如果不在可选值内将被忽略 | string | success/warning/info/error | — |
+| iconClass | 自定义图标的类名。若设置了 `type`，则 `iconClass` 会被覆盖 | string | — | — |
+| customClass | 自定义类名 | string | — | — |
 | duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 4500 |
 | onClose | 关闭时的回调函数 | function | — | — |
 | offset | 偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量 | number | — | 0 |

packages/message/src/main.vue

@@ -1,8 +1,14 @@
 <template>
   <transition name="el-message-fade">
-    <div class="el-message" v-show="visible" @mouseenter="clearTimer" @mouseleave="startTimer">
-      <img class="el-message__icon" :src="typeImg" alt="">
-      <div class="el-message__group">
+    <div
+      class="el-message"
+      :class="customClass"
+      v-show="visible"
+      @mouseenter="clearTimer"
+      @mouseleave="startTimer">
+      <img class="el-message__img" :src="typeImg" alt="" v-if="!iconClass">
+      <div class="el-message__group" :class="{ 'is-with-icon': iconClass }">
+        <i class="el-message__icon" :class="iconClass" v-if="iconClass"></i>
         <p>{{ message }}</p>
         <div v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></div>
       </div>
@@ -18,6 +24,8 @@
         message: '',
         duration: 3000,
         type: 'info',
+        iconClass: '',
+        customClass: '',
         onClose: null,
         showClose: false,
         closed: false,

packages/notification/src/main.vue

@@ -1,8 +1,18 @@
 <template>
   <transition name="el-notification-fade">
-    <div class="el-notification" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
-      <i class="el-notification__icon" :class="[ typeClass ]" v-if="type"></i>
-      <div class="el-notification__group" :style="{ 'margin-left': typeClass ? '55px' : '0' }">
+    <div
+      class="el-notification"
+      :class="customClass"
+      v-show="visible"
+      :style="{ top: top ? top + 'px' : 'auto' }"
+      @mouseenter="clearTimer()"
+      @mouseleave="startTimer()">
+      <i
+        class="el-notification__icon"
+        :class="[ typeClass, iconClass ]"
+        v-if="type || iconClass">
+      </i>
+      <div class="el-notification__group" :class="{ 'is-with-icon': typeClass || iconClass }">
         <span>{{ title }}</span>
         <p>{{ message }}</p>
         <div class="el-notification__closeBtn el-icon-close" @click="close"></div>
@@ -27,6 +37,8 @@
         message: '',
         duration: 4500,
         type: '',
+        customClass: '',
+        iconClass: '',
         onClose: null,
         closed: false,
         top: null,

packages/theme-default/src/message.css

@@ -20,6 +20,11 @@
     @e group {
       margin-left: 38px;
       position: relative;
+      height: 20px;
+
+      @when with-icon {
+        margin-left: 0;
+      }
 
       & p {
         font-size: var(--font-size-base);
@@ -28,16 +33,23 @@
         white-space: nowrap;
         color: var(--message-content-color);
         text-align: justify;
+        display: inline-block;
+        vertical-align: middle;
       }
     }
 
-    @e icon {
+    @e img {
       size: 40px;
       position: absolute;
       left: 0;
       top: 0;
     }
 
+    @e icon {
+      vertical-align: middle;
+      margin-right: 8px;
+    }
+
     @e closeBtn {
       position: absolute 3px 0 * *;
       cursor: pointer;

packages/theme-default/src/notification.css

@@ -16,6 +16,10 @@
     overflow: hidden;
 
     @e group {
+      margin-left: 0;
+      @when with-icon {
+        margin-left: 55px;
+      }
       & span {
         font-size: var(--notification-title-font-size);
         color: var(--notification-title-color);

test/unit/specs/message.spec.js

@@ -18,7 +18,7 @@ describe('Message', () => {
       message: '灰风',
       duration: 500
     });
-    const message = document.querySelector('.el-message__group').childNodes[0];
+    const message = document.querySelector('.el-message__group p');
     expect(document.querySelector('.el-message')).to.exist;
     expect(message.textContent).to.equal('灰风');
     setTimeout(() => {