MessageBox: add iconClass (#11499)

ElemeFE · Jun 6, 2018 · 0afa514 · 0afa514
1 parent 465dcf2
commit 0afa514
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 17 deletions.
diff --git a/examples/docs/en-US/message-box.md b/examples/docs/en-US/message-box.md
@@ -382,6 +382,7 @@ The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.con
 | message | content of the MessageBox | string | — | — |
 | dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
 | type | message type, used for icon display | string | success / info / warning / error | — |
+| iconClass | custom icon's class, overrides `type` | string | — | — |
 | customClass | custom class name for MessageBox | string | — | — |
 | callback | MessageBox closing callback if you don't prefer Promise | function(action), where action can be 'confirm' or 'cancel', and `instance` is the MessageBox instance. You can access to that instance's attributes and methods | — | — |
 | showClose | whether to show close icon of MessageBox | boolean | — | true |

diff --git a/examples/docs/es/message-box.md b/examples/docs/es/message-box.md
@@ -385,6 +385,7 @@ Los metodos correspondientes: `MessageBox`, `MessageBox.alert`, `MessageBox.conf
 | message                  | contenido del componente MessageBox      | string                                   | —                                | —                                        |
 | dangerouslyUseHTMLString | utilizado para que `message` sea tratado como una cadena HTML | boolean                                  | —                                | false                                    |
 | type                     | tipo de mensaje , utilizado para mostrar el  icono | string                                   | success / info / warning / error | —                                        |
+| iconClass                | clase personalizada para el icono, sobreescribe `type` | string         | —                          | —           |
 | customClass              | nombre de la clase personzalida para el componente MessageBox | string                                   | —                                | —                                        |
 | callback                 | MessageBox callback al cerrar si no desea utilizar Promise | function(action), donde la accion puede ser 'confirm' o 'cancel', e `instance`  es la instancia del componente MessageBox. Puedes acceder a los metodos y atributos de esa instancia | —                                | —                                        |
 | beforeClose              | callback llamado antes de cerrar el componente MessageBox, y previene que el componente MessageBox se cierre | function(action, instance, done), donde `action` pueden ser 'confirm' o 'cancel'; `instance` es la instancia del componente MessageBox, Puedes acceder a los metodos y atributos de esa instancia; `done` es para cerrar la instancia | —                                | —                                        |

diff --git a/examples/docs/zh-CN/message-box.md b/examples/docs/zh-CN/message-box.md
@@ -380,6 +380,7 @@ import { MessageBox } from 'element-ui';
 | message | MessageBox 消息正文内容 | string / VNode | — | — |
 | dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false |
 | type | 消息类型，用于显示图标 | string | success / info / warning / error | — |
+| iconClass | 自定义图标的类名，会覆盖 `type` | string | — | — |
 | customClass | MessageBox 的自定义类名 | string | — | — |
 | callback | 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 | function(action, instance)，action 的值为'confirm'或'cancel', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法 | — | — |
 | showClose | MessageBox 是否显示右上角关闭按钮 | boolean | — | true |

diff --git a/packages/message-box/src/main.js b/packages/message-box/src/main.js
@@ -2,6 +2,7 @@ const defaults = {
   title: null,
   message: '',
   type: '',
+  iconClass: '',
   showInput: false,
   showClose: true,
   modalFade: true,

diff --git a/packages/message-box/src/main.vue b/packages/message-box/src/main.vue
@@ -12,8 +12,8 @@
         <div class="el-message-box__header" v-if="title !== null">
           <div class="el-message-box__title">
             <div
-              :class="['el-message-box__status', typeClass]"
-              v-if="typeClass && center">
+              :class="['el-message-box__status', icon]"
+              v-if="icon && center">
             </div>
             <span>{{ title }}</span>
           </div>
@@ -29,8 +29,8 @@
         </div>
         <div class="el-message-box__content">
           <div
-            :class="['el-message-box__status', typeClass]"
-            v-if="typeClass && !center && message !== ''">
+            :class="['el-message-box__status', icon]"
+            v-if="icon && !center && message !== ''">
           </div>
           <div class="el-message-box__message" v-if="message !== ''">
             <slot>
@@ -132,8 +132,9 @@
     },
 
     computed: {
-      typeClass() {
-        return this.type && typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : '';
+      icon() {
+        const { type, iconClass } = this;
+        return iconClass || (type && typeMap[type] ? `el-icon-${ typeMap[type] }` : '');
       },
 
       confirmButtonClasses() {
@@ -295,6 +296,7 @@
         title: undefined,
         message: '',
         type: '',
+        iconClass: '',
         customClass: '',
         showInput: false,
         inputValue: null,

diff --git a/packages/message/src/main.vue b/packages/message/src/main.vue
@@ -6,12 +6,12 @@
         type && !iconClass ? `el-message--${ type }` : '',
         center ? 'is-center' : '',
         showClose ? 'is-closable' : '',
-        customClass]"
+        customClass
+      ]"
       v-show="visible"
       @mouseenter="clearTimer"
       @mouseleave="startTimer"
-      role="alert"
-    >
+      role="alert">
       <i :class="iconClass" v-if="iconClass"></i>
       <i :class="typeClass" v-else></i>
       <slot>
@@ -50,14 +50,6 @@
     },
 
     computed: {
-      iconWrapClass() {
-        const classes = ['el-message__icon'];
-        if (this.type && !this.iconClass) {
-          classes.push(`el-message__icon--${ this.type }`);
-        }
-        return classes;
-      },
-
       typeClass() {
         return this.type && !this.iconClass
           ? `el-message__icon el-icon-${ typeMap[this.type] }`

diff --git a/test/unit/specs/message-box.spec.js b/test/unit/specs/message-box.spec.js
@@ -50,6 +50,19 @@ describe('MessageBox', () => {
     }, 300);
   });
 
+  it('custom icon', done => {
+    MessageBox({
+      type: 'warning',
+      iconClass: 'el-icon-question',
+      message: '这是一段内容'
+    });
+    setTimeout(() => {
+      const icon = document.querySelector('.el-message-box__status');
+      expect(icon.classList.contains('el-icon-question')).to.true;
+      done();
+    }, 300);
+  });
+
   it('html string', done => {
     MessageBox({
       title: 'html string',

diff --git a/types/message-box.d.ts b/types/message-box.d.ts
@@ -17,6 +17,7 @@ export declare class ElMessageBoxComponent extends Vue {
   title: string
   message: string
   type: MessageType
+  iconClass: string
   customClass: string
   showInput: boolean
   showClose: boolean
@@ -51,6 +52,9 @@ export interface ElMessageBoxOptions {
   /** Message type, used for icon display */
   type?: MessageType
 
+  /** Custom icon's class */
+  iconClass?: string
+
   /** Custom class name for MessageBox */
   customClass?: string