Browse Source

add .type on Notification and Message

Leopoldthecoder 8 năm trước cách đây
mục cha
commit
3d60efd468

+ 1 - 0
CHANGELOG.md

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

+ 4 - 10
examples/docs/zh-cn/message.md

@@ -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
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

+ 10 - 14
examples/docs/zh-cn/notification.md

@@ -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
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

+ 12 - 0
packages/message/src/main.js

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

+ 12 - 0
packages/notification/src/main.js

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