mirror of https://github.com/ElemeFE/element
add .type on Notification and Message
parent
805e8fc112
commit
3d60efd468
|
@ -7,6 +7,7 @@
|
||||||
- 修复 Tabs 切换后 Tab-panel 被销毁的问题
|
- 修复 Tabs 切换后 Tab-panel 被销毁的问题
|
||||||
- 修复 TimePicker 错误的隐藏面板
|
- 修复 TimePicker 错误的隐藏面板
|
||||||
- 修复 Table Cell 的样式, #204
|
- 修复 Table Cell 的样式, #204
|
||||||
|
- 为 Notification 和 Message 的不同 type 添加独立的调用方法
|
||||||
- 为 Message Box 和 Dialog 添加 lockScroll 属性,用于定义是否在弹框出现时将 body 滚动锁定
|
- 为 Message Box 和 Dialog 添加 lockScroll 属性,用于定义是否在弹框出现时将 body 滚动锁定
|
||||||
- 新增 Input textarea 类型的 rows, autosize 属性
|
- 新增 Input textarea 类型的 rows, autosize 属性
|
||||||
|
|
||||||
|
|
|
@ -20,10 +20,7 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
open4() {
|
open4() {
|
||||||
this.$message({
|
this.$message.error('错了哦,这是一条错误消息');
|
||||||
message: '错了哦,这是一条错误消息',
|
|
||||||
type: 'error'
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
open5() {
|
open5() {
|
||||||
|
@ -99,7 +96,7 @@
|
||||||
|
|
||||||
用来显示「成功、警告、消息、错误」类的操作反馈。
|
用来显示「成功、警告、消息、错误」类的操作反馈。
|
||||||
|
|
||||||
:::demo 当需要自定义更多属性时,Message 也可以接收一个对象为参数。比如,设置`type`字段可以定义不同的状态,默认为`info`。此时正文内容以`message`的值传入。
|
:::demo 当需要自定义更多属性时,Message 也可以接收一个对象为参数。比如,设置`type`字段可以定义不同的状态,默认为`info`。此时正文内容以`message`的值传入。同时,我们也为 Message 的各种 type 注册了方法,可以在不传入`type`字段的情况下像`open4`那样直接调用。
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<el-button :plain="true" @click.native="open2">成功</el-button>
|
<el-button :plain="true" @click.native="open2">成功</el-button>
|
||||||
|
@ -126,10 +123,7 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
open4() {
|
open4() {
|
||||||
this.$message({
|
this.$message.error('错了哦,这是一条错误消息');
|
||||||
message: '错了哦,这是一条错误消息',
|
|
||||||
type: 'error'
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -201,7 +195,7 @@ element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instanc
|
||||||
import { Message } from 'element-ui';
|
import { Message } from 'element-ui';
|
||||||
```
|
```
|
||||||
|
|
||||||
此时调用方法为 `Message(options)`。
|
此时调用方法为 `Message(options)`。我们也为每个 type 定义了各自的方法,如 `Message.success(options)`。
|
||||||
|
|
||||||
### Options
|
### Options
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|
|
|
@ -33,18 +33,16 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
open5() {
|
open5() {
|
||||||
this.$notify({
|
this.$notify.info({
|
||||||
title: '消息',
|
title: '消息',
|
||||||
message: '这是一条消息的提示消息',
|
message: '这是一条消息的提示消息'
|
||||||
type: 'info'
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
open6() {
|
open6() {
|
||||||
this.$notify({
|
this.$notify.error({
|
||||||
title: '错误',
|
title: '错误',
|
||||||
message: '这是一条错误的提示消息',
|
message: '这是一条错误的提示消息'
|
||||||
type: 'error'
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -113,7 +111,7 @@
|
||||||
|
|
||||||
带有 icon,常用来显示「成功、警告、消息、错误」类的系统消息
|
带有 icon,常用来显示「成功、警告、消息、错误」类的系统消息
|
||||||
|
|
||||||
::: demo Element 为 Notification 组件准备了四种通知类型:`success`, `warning`, `info`, `error`。通过`type`字段来设置,除此以外的值将被忽略。
|
::: demo Element 为 Notification 组件准备了四种通知类型:`success`, `warning`, `info`, `error`。通过`type`字段来设置,除此以外的值将被忽略。同时,我们也为 Notification 的各种 type 注册了方法,可以在不传入`type`字段的情况下像`open5`和`open6`那样直接调用。
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<el-button
|
<el-button
|
||||||
|
@ -158,18 +156,16 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
open5() {
|
open5() {
|
||||||
this.$notify({
|
this.$notify.info({
|
||||||
title: '消息',
|
title: '消息',
|
||||||
message: '这是一条消息的提示消息',
|
message: '这是一条消息的提示消息'
|
||||||
type: 'info'
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
open6() {
|
open6() {
|
||||||
this.$notify({
|
this.$notify.error({
|
||||||
title: '错误',
|
title: '错误',
|
||||||
message: '这是一条错误的提示消息',
|
message: '这是一条错误的提示消息'
|
||||||
type: 'error'
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -190,7 +186,7 @@ Element 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue inst
|
||||||
import { Notification } from 'element-ui';
|
import { Notification } from 'element-ui';
|
||||||
```
|
```
|
||||||
|
|
||||||
此时调用方法为 `Notification(options)`。
|
此时调用方法为 `Notification(options)`。我们也为每个 type 定义了各自的方法,如 `Notification.success(options)`。
|
||||||
|
|
||||||
### Options
|
### Options
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|
|
|
@ -30,6 +30,18 @@ var Message = function(options) {
|
||||||
instances.push(instance);
|
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) {
|
Message.close = function(id, userOnClose) {
|
||||||
for (let i = 0, len = instances.length; i < len; i++) {
|
for (let i = 0, len = instances.length; i < len; i++) {
|
||||||
if (id === instances[i].id) {
|
if (id === instances[i].id) {
|
||||||
|
|
|
@ -32,6 +32,18 @@ var Notification = function(options) {
|
||||||
instances.push(instance);
|
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) {
|
Notification.close = function(id, userOnClose) {
|
||||||
let index;
|
let index;
|
||||||
let removedHeight;
|
let removedHeight;
|
||||||
|
|
Loading…
Reference in New Issue