From 0afa514e0ad710458b05cb733c3304991ab2e452 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?= Date: Wed, 6 Jun 2018 12:19:24 +0800 Subject: [PATCH] MessageBox: add iconClass (#11499) --- examples/docs/en-US/message-box.md | 1 + examples/docs/es/message-box.md | 1 + examples/docs/zh-CN/message-box.md | 1 + packages/message-box/src/main.js | 1 + packages/message-box/src/main.vue | 14 ++++++++------ packages/message/src/main.vue | 14 +++----------- test/unit/specs/message-box.spec.js | 13 +++++++++++++ types/message-box.d.ts | 4 ++++ 8 files changed, 32 insertions(+), 17 deletions(-) diff --git a/examples/docs/en-US/message-box.md b/examples/docs/en-US/message-box.md index 646d5088f..9f15b836c 100644 --- 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 index 5b31f5a86..8dbb78a70 100644 --- 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 index ad51ba872..6c4c87bcd 100644 --- 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 index 002531824..4e5be2335 100644 --- 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 index 1734d9d86..374b128a2 100644 --- a/packages/message-box/src/main.vue +++ b/packages/message-box/src/main.vue @@ -12,8 +12,8 @@
+ :class="['el-message-box__status', icon]" + v-if="icon && center">
{{ title }}
@@ -29,8 +29,8 @@
+ :class="['el-message-box__status', icon]" + v-if="icon && !center && message !== ''">
@@ -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 index 58be0a986..8e9e5d22b 100644 --- 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"> @@ -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 index 079164f40..18e7aca3d 100644 --- 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 index 9e8614195..a6df9fa1f 100644 --- 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