add .type on Notification and Message

pull/227/head
Leopoldthecoder 2016-10-04 17:33:32 +08:00 committed by cinwell.li
parent 805e8fc112
commit 3d60efd468
5 changed files with 39 additions and 24 deletions

View File

@ -7,6 +7,7 @@
- 修复 Tabs 切换后 Tab-panel 被销毁的问题
- 修复 TimePicker 错误的隐藏面板
- 修复 Table Cell 的样式, #204
- 为 Notification 和 Message 的不同 type 添加独立的调用方法
- 为 Message Box 和 Dialog 添加 lockScroll 属性,用于定义是否在弹框出现时将 body 滚动锁定
- 新增 Input textarea 类型的 rows, autosize 属性

View File

@ -20,10 +20,7 @@
},
open4() {
this.$message({
message: '错了哦,这是一条错误消息',
type: 'error'
});
this.$message.error('错了哦,这是一条错误消息');
},
open5() {
@ -99,7 +96,7 @@
用来显示「成功、警告、消息、错误」类的操作反馈。
:::demo 当需要自定义更多属性时Message 也可以接收一个对象为参数。比如,设置`type`字段可以定义不同的状态,默认为`info`。此时正文内容以`message`的值传入。
:::demo 当需要自定义更多属性时Message 也可以接收一个对象为参数。比如,设置`type`字段可以定义不同的状态,默认为`info`。此时正文内容以`message`的值传入。同时,我们也为 Message 的各种 type 注册了方法,可以在不传入`type`字段的情况下像`open4`那样直接调用。
```html
<template>
<el-button :plain="true" @click.native="open2">成功</el-button>
@ -126,10 +123,7 @@
},
open4() {
this.$message({
message: '错了哦,这是一条错误消息',
type: 'error'
});
this.$message.error('错了哦,这是一条错误消息');
}
}
}
@ -201,7 +195,7 @@ element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instanc
import { Message } from 'element-ui';
```
此时调用方法为 `Message(options)`
此时调用方法为 `Message(options)`我们也为每个 type 定义了各自的方法,如 `Message.success(options)`
### Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |

View File

@ -33,18 +33,16 @@
},
open5() {
this.$notify({
this.$notify.info({
title: '消息',
message: '这是一条消息的提示消息',
type: 'info'
message: '这是一条消息的提示消息'
});
},
open6() {
this.$notify({
this.$notify.error({
title: '错误',
message: '这是一条错误的提示消息',
type: 'error'
message: '这是一条错误的提示消息'
});
},
@ -113,7 +111,7 @@
带有 icon常用来显示「成功、警告、消息、错误」类的系统消息
::: demo Element 为 Notification 组件准备了四种通知类型:`success`, `warning`, `info`, `error`。通过`type`字段来设置,除此以外的值将被忽略。
::: demo Element 为 Notification 组件准备了四种通知类型:`success`, `warning`, `info`, `error`。通过`type`字段来设置,除此以外的值将被忽略。同时,我们也为 Notification 的各种 type 注册了方法,可以在不传入`type`字段的情况下像`open5`和`open6`那样直接调用。
```html
<template>
<el-button
@ -158,18 +156,16 @@
},
open5() {
this.$notify({
this.$notify.info({
title: '消息',
message: '这是一条消息的提示消息',
type: 'info'
message: '这是一条消息的提示消息'
});
},
open6() {
this.$notify({
this.$notify.error({
title: '错误',
message: '这是一条错误的提示消息',
type: 'error'
message: '这是一条错误的提示消息'
});
}
}
@ -190,7 +186,7 @@ Element 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue inst
import { Notification } from 'element-ui';
```
此时调用方法为 `Notification(options)`
此时调用方法为 `Notification(options)`我们也为每个 type 定义了各自的方法,如 `Notification.success(options)`
### Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |

View File

@ -30,6 +30,18 @@ var Message = function(options) {
instances.push(instance);
};
['success', 'warning', 'info', 'error'].forEach(type => {
Message[type] = options => {
if (typeof options === 'string') {
options = {
message: options
};
}
options.type = type;
return Message(options);
};
});
Message.close = function(id, userOnClose) {
for (let i = 0, len = instances.length; i < len; i++) {
if (id === instances[i].id) {

View File

@ -32,6 +32,18 @@ var Notification = function(options) {
instances.push(instance);
};
['success', 'warning', 'info', 'error'].forEach(type => {
Notification[type] = options => {
if (typeof options === 'string') {
options = {
message: options
};
}
options.type = type;
return Notification(options);
};
});
Notification.close = function(id, userOnClose) {
let index;
let removedHeight;