Notification/Message: return instance for manual close (#1033)

CHANGELOG.en-US.md

@@ -9,6 +9,7 @@
 - Fixed Loading locks scroll of `body` in specific scenarios, #968
 - `span` of Col is no longer a required attribute, and its default value is `24` if omitted
 - DatePicker: add `disabled` and `editable` attribute.
+- Added `close` method for Message and Notification to manually close an instance
 
 #### Breaking change
 - DatePicker: can't change value when `readonly` is true, setting `editable` to false if you want to disabled input. #976

CHANGELOG.zh-CN.md

@@ -8,6 +8,7 @@
 - 修复 Loading 在某些情况下错误地锁定 `body` 滚动的问题，#968
 - Col 组件的 `span` 属性不再是必填属性，在省略的情况下其默认值为 `24`
 - DatePicker 新增 `disabled` 和 `editable`
+- 新增 Message 和 Notification 的 `close` 方法，用于手动关闭实例
 
 #### 非兼容性更新
 - DatePicker 的 `readonly` 为完全只读，新增的 `editable` 属性设置为 false 可禁止输入但是可通过弹框选择，#976

examples/docs/en-US/message.md

@@ -200,3 +200,9 @@ In this case you should call `Message(options)`. We have also registered methods
 | duration | display duration, millisecond. If set to 0, it will not turn off automatically | number | — | 3000 |
 | showClose | whether to show a close button | boolean | — | false |
 | onClose | callback function when closed with the message instance as the parameter | function | — | — |
+
+### Methods
+`Message` and `this.$message` returns the current Message instance. To manually close the instance, you can call `close` on it.
+| Method | Description |
+| ---- | ---- |
+| close | close the Message |

examples/docs/en-US/notification.md

@@ -188,3 +188,8 @@ In this case you should call `Notification(options)`. We have also registered me
 | duration | duration before close. It will not automatically close if set 0 | number | — | 4500 |
 | onClose | callback function when closed | function | — | — |
 
+### Methods
+`Notification` and `this.$notify` returns the current Message instance. To manually close the instance, you can call `close` on it.
+| Method | Description |
+| ---- | ---- |
+| close | close the Notification |

examples/docs/zh-CN/message.md

@@ -200,3 +200,9 @@ import { Message } from 'element-ui';
 | duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 3000 |
 | showClose | 是否显示关闭按钮 | boolean | — | false |
 | onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | — |
+
+### 方法
+调用 `Message` 或 `this.$message` 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 `close` 方法。
+| 方法名 | 说明 |
+| ---- | ---- |
+| close | 关闭当前的 Message |

examples/docs/zh-CN/notification.md

@@ -188,3 +188,9 @@ import { Notification } from 'element-ui';
 | type | 主题样式，如果不在可选值内将被忽略 | string | success/warning/info/error | — |
 | duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 4500 |
 | onClose | 关闭时的回调函数 | function | — | — |
+
+### 方法
+调用 `Notification` 或 `this.$notify` 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 `close` 方法。
+| 方法名 | 说明 |
+| ---- | ---- |
+| close | 关闭当前的 Notification |

packages/message/src/main.js

@@ -30,6 +30,7 @@ var Message = function(options) {
   instance.dom = instance.vm.$el;
   instance.dom.style.zIndex = PopupManager.nextZIndex();
   instances.push(instance);
+  return instance.vm;
 };
 
 ['success', 'warning', 'info', 'error'].forEach(type => {

packages/message/src/main.vue

@@ -4,7 +4,7 @@
       <img class="el-message__icon" :src="typeImg" alt="">
       <div class="el-message__group">
         <p>{{ message }}</p>
-        <div v-if="showClose" class="el-message__closeBtn el-icon-close" @click="handleClose"></div>
+        <div v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></div>
       </div>
     </div>
   </transition>
@@ -47,7 +47,7 @@
         this.$el.parentNode.removeChild(this.$el);
       },
 
-      handleClose() {
+      close() {
         this.closed = true;
         if (typeof this.onClose === 'function') {
           this.onClose(this);
@@ -62,7 +62,7 @@
         if (this.duration > 0) {
           this.timer = setTimeout(() => {
             if (!this.closed) {
-              this.handleClose();
+              this.close();
             }
           }, this.duration);
         }

packages/notification/src/main.js

@@ -32,6 +32,7 @@ var Notification = function(options) {
   topDist += 16;
   instance.top = topDist;
   instances.push(instance);
+  return instance.vm;
 };
 
 ['success', 'warning', 'info', 'error'].forEach(type => {

packages/notification/src/main.vue

@@ -5,7 +5,7 @@
       <div class="el-notification__group" :style="{ 'margin-left': typeClass ? '55px' : '0' }">
         <span>{{ title }}</span>
         <p>{{ message }}</p>
-        <div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div>
+        <div class="el-notification__closeBtn el-icon-close" @click="close"></div>
       </div>
     </div>
   </transition>
@@ -56,7 +56,7 @@
         this.$el.parentNode.removeChild(this.$el);
       },
 
-      handleClose() {
+      close() {
         this.closed = true;
         if (typeof this.onClose === 'function') {
           this.onClose();
@@ -71,7 +71,7 @@
         if (this.duration > 0) {
           this.timer = setTimeout(() => {
             if (!this.closed) {
-              this.handleClose();
+              this.close();
             }
           }, this.duration);
         }
@@ -82,7 +82,7 @@
       if (this.duration > 0) {
         this.timer = setTimeout(() => {
           if (!this.closed) {
-            this.handleClose();
+            this.close();
           }
         }, this.duration);
       }