github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

MessageBox: add iconClass (#11499)

pull/11515/head
杨奕 2018-06-06 12:19:24 +08:00 committed by GitHub
parent 465dcf2a19
commit 0afa514e0a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 32 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
examples/docs/en-US/message-box.md
View File

@ -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 |

1
examples/docs/es/message-box.md
View File

@ -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 | — | — |

1
examples/docs/zh-CN/message-box.md
View File

@ -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 |

1
packages/message-box/src/main.js
View File

@ -2,6 +2,7 @@ const defaults = {
title: null,
message: '',
type: '',
iconClass: '',
showInput: false,
showClose: true,
modalFade: true,

14
packages/message-box/src/main.vue
View File

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

14
packages/message/src/main.vue
View File

@ -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] }`

13
test/unit/specs/message-box.spec.js
View File

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

4
types/message-box.d.ts vendored
View File

@ -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