From e97c3d5ec35992a27c51f65769922fb1dac9f2ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=80=AA=E4=BF=8A=E6=9D=B0?= <nijunjie@corp.netease.com>
Date: Thu, 25 Nov 2021 11:00:06 +0800
Subject: [PATCH] =?UTF-8?q?MessageBox:=20fix=20history=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E8=B7=B3=E8=BD=ACmessagebox=E4=B8=8D=E4=BC=9A=E6=B6=88?=
 =?UTF-8?q?=E5=A4=B1=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/docs/en-US/message-box.md | 1 +
 examples/docs/fr-FR/message-box.md | 1 +
 examples/docs/zh-CN/message-box.md | 1 +
 packages/message-box/src/main.js   | 1 +
 packages/message-box/src/main.vue  | 9 +++++++++
 types/message-box.d.ts             | 3 +++
 6 files changed, 16 insertions(+)

diff --git a/examples/docs/en-US/message-box.md b/examples/docs/en-US/message-box.md
index dec08c4e6..23d1fc58e 100644
--- a/examples/docs/en-US/message-box.md
+++ b/examples/docs/en-US/message-box.md
@@ -317,6 +317,7 @@ The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.con
 | closeOnClickModal | whether MessageBox can be closed by clicking the mask | boolean | — | true (false when called with alert) |
 | closeOnPressEscape | whether MessageBox can be closed by pressing the ESC | boolean | — | true (false when called with alert) |
 | closeOnHashChange | whether to close MessageBox when hash changes | boolean | — | true |
+| closeOnPopstate | whether to close MessageBox when the active history entry changes | boolean | — | true |
 | showInput | whether to show an input | boolean | — | false (true when called with prompt) |
 | inputPlaceholder | placeholder of input | string | — | — |
 | inputType | type of input | string | — | text |
diff --git a/examples/docs/fr-FR/message-box.md b/examples/docs/fr-FR/message-box.md
index 2bc4fb2e4..1719a6762 100644
--- a/examples/docs/fr-FR/message-box.md
+++ b/examples/docs/fr-FR/message-box.md
@@ -319,6 +319,7 @@ Les méthodes correspondantes sont: `MessageBox`, `MessageBox.alert`, `MessageBo
 | closeOnClickModal | Si MessageBox peut être fermée en cliquant en dehors. | boolean | — | true (false dans le cas de alert). |
 | closeOnPressEscape | Si MessageBox peut être fermée en pressant ESC. | boolean | — | true (false dans le cas de alert) |
 | closeOnHashChange | Si MessageBox doit être fermée quand le hash change. | boolean | — | true |
+| closeOnPopstate | Si MessageBox doit être fermée quand le active de l'historique change. | boolean | — | true |
 | showInput | Si un champs d'input doit être affiché. | boolean | — | false (true dans le cas de prompt). |
 | inputPlaceholder | Placeholder du champs d'input. | string | — | — |
 | inputType | Type du champs d'input. | string | — | text |
diff --git a/examples/docs/zh-CN/message-box.md b/examples/docs/zh-CN/message-box.md
index 774d822aa..1908ca0b1 100644
--- a/examples/docs/zh-CN/message-box.md
+++ b/examples/docs/zh-CN/message-box.md
@@ -315,6 +315,7 @@ import { MessageBox } from 'element-ui';
 | closeOnClickModal | 是否可通过点击遮罩关闭 MessageBox | boolean | — | true（以 alert 方式调用时为 false） |
 | closeOnPressEscape | 是否可通过按下 ESC 键关闭 MessageBox | boolean | — | true（以 alert 方式调用时为 false） |
 | closeOnHashChange | 是否在 hashchange 时关闭 MessageBox | boolean | — | true |
+| closeOnPopstate | 是否在 活动历史记录条目更改 时关闭 MessageBox | boolean | — | true |
 | showInput | 是否显示输入框 | boolean | — | false（以 prompt 方式调用时为 true）|
 | inputPlaceholder | 输入框的占位符 | string | — | — |
 | inputType | 输入框的类型 | string | — | text |
diff --git a/packages/message-box/src/main.js b/packages/message-box/src/main.js
index 7b9a7fd39..0df25401a 100644
--- a/packages/message-box/src/main.js
+++ b/packages/message-box/src/main.js
@@ -10,6 +10,7 @@ const defaults = {
   closeOnClickModal: true,
   closeOnPressEscape: true,
   closeOnHashChange: true,
+  closeOnPopstate: true,
   inputValue: null,
   inputPlaceholder: '',
   inputType: 'text',
diff --git a/packages/message-box/src/main.vue b/packages/message-box/src/main.vue
index 5ce644534..f544366f4 100644
--- a/packages/message-box/src/main.vue
+++ b/packages/message-box/src/main.vue
@@ -118,6 +118,9 @@
       closeOnHashChange: {
         default: true
       },
+      closeOnPopstate: {
+        default: true
+      },
       center: {
         default: false,
         type: Boolean
@@ -283,6 +286,9 @@
         if (this.closeOnHashChange) {
           window.addEventListener('hashchange', this.close);
         }
+        if (this.closeOnPopstate) {
+          window.addEventListener('popstate', this.close);
+        }
       });
     },
 
@@ -290,6 +296,9 @@
       if (this.closeOnHashChange) {
         window.removeEventListener('hashchange', this.close);
       }
+      if (this.closeOnPopstate) {
+        window.addEventListener('popstate', this.close);
+      }
       setTimeout(() => {
         messageBox.closeDialog();
       });
diff --git a/types/message-box.d.ts b/types/message-box.d.ts
index c3acc3e14..715d726ac 100644
--- a/types/message-box.d.ts
+++ b/types/message-box.d.ts
@@ -106,6 +106,9 @@ export interface ElMessageBoxOptions {
   /** Whether to close MessageBox when hash changes */
   closeOnHashChange?: boolean
 
+  /** Whether to close MessageBox when the active history entry changes */
+  closeOnPopstate?: boolean
+
   /** Whether to show an input */
   showInput?: boolean