MessageBox: fix history路由跳转messagebox不会消失 bug

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 |

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 |

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 |

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',

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();
       });

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