diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index a835e601f..1010f5aeb 100644 --- a/CHANGELOG.en-US.md +++ b/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 diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 33d94a416..7cf8df383 100644 --- a/CHANGELOG.zh-CN.md +++ b/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 diff --git a/examples/docs/en-US/message.md b/examples/docs/en-US/message.md index 813029cf7..1d42e559e 100644 --- a/examples/docs/en-US/message.md +++ b/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 | \ No newline at end of file diff --git a/examples/docs/en-US/notification.md b/examples/docs/en-US/notification.md index ad7a6a7d5..d1037c389 100644 --- a/examples/docs/en-US/notification.md +++ b/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 | diff --git a/examples/docs/zh-CN/message.md b/examples/docs/zh-CN/message.md index 6a415ecd7..cf4aad81d 100644 --- a/examples/docs/zh-CN/message.md +++ b/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 | diff --git a/examples/docs/zh-CN/notification.md b/examples/docs/zh-CN/notification.md index a378964cf..a3bbcf727 100644 --- a/examples/docs/zh-CN/notification.md +++ b/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 | diff --git a/packages/message/src/main.js b/packages/message/src/main.js index bc5414ca2..b6b27a49a 100644 --- a/packages/message/src/main.js +++ b/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 => { diff --git a/packages/message/src/main.vue b/packages/message/src/main.vue index 8b0778189..5ec07df15 100644 --- a/packages/message/src/main.vue +++ b/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); } diff --git a/packages/notification/src/main.js b/packages/notification/src/main.js index fda9d7cb8..7ee384e85 100644 --- a/packages/notification/src/main.js +++ b/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 => { diff --git a/packages/notification/src/main.vue b/packages/notification/src/main.vue index 8051af08a..a0857aded 100644 --- a/packages/notification/src/main.vue +++ b/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); }