fix(dialog): 修复小程序平台启用 close-on-popstate 时 onMounted 报错 (#435)

xiaohe0601 · web-flow · commit 93127f557ad6 · 2024-10-11T17:11:30.000+08:00
diff --git a/docs/components/feedback/dialog.md b/docs/components/feedback/dialog.md
@@ -122,55 +122,55 @@ export default {
 
 ### Props
 
-| 参数                   | 说明                                                          | 类型                     | 默认值       |
-| ---------------------- | ------------------------------------------------------------- | ------------------------ | ------------ |
-| title                  | 标题                                                          | string                   | -            |
-| content                | 内容，支持 `HTML`                                             | string                   | -            |
-| close-on-click-overlay | 点击蒙层是否关闭对话框                                        | boolean                  | `true`       |
-| no-footer              | 是否隐藏底部按钮栏                                            | boolean                  | `false`      |
-| no-ok-btn              | 是否隐藏确定按钮                                              | boolean                  | `false`      |
-| no-cancel-btn          | 是否隐藏取消按钮                                              | boolean                  | `false`      |
-| cancel-text            | 取消按钮文案                                                  | string                   | `”取消“`     |
-| ok-text                | 确定按钮文案                                                  | string                   | `”确 定“`    |
-| cancel-auto-close      | 取消按钮是否默认关闭弹窗                                      | boolean                  | `true`       |
-| text-align             | 文字对齐方向，可选值同 `css` 的 `text-align`                  | string                   | `"center"`   |
-| close-on-popstate      | 是否在页面回退时自动关闭                                      | boolean                  | `false`      |
-| lock-scroll `H5`       | 背景是否锁定                                                  | boolean                  | `true`       |
-| footer-direction       | 使用横纵方向 可选值 `horizontal`、`vertical`                  | string                   | `horizontal` |
-| overlay-class          | 自定义遮罩类名                                                | string                   | -            |
-| overlay-style          | 自定义遮罩样式                                                | CSSProperties            | -            |
-| pop-class              | 自定义 `popup` 弹框类名                                       | string                   | -            |
-| pop-style              | 自定义 `popup` 弹框样式                                       | CSSProperties            | -            |
-| custom-class           | 自定义 `class`                                                | string                   | -            |
+| 参数                     | 说明                                       | 类型                       | 默认值          |
+|------------------------|------------------------------------------|--------------------------|--------------|
+| title                  | 标题                                       | string                   | -            |
+| content                | 内容，支持 `HTML`                             | string                   | -            |
+| close-on-click-overlay | 点击蒙层是否关闭对话框                              | boolean                  | `true`       |
+| no-footer              | 是否隐藏底部按钮栏                                | boolean                  | `false`      |
+| no-ok-btn              | 是否隐藏确定按钮                                 | boolean                  | `false`      |
+| no-cancel-btn          | 是否隐藏取消按钮                                 | boolean                  | `false`      |
+| cancel-text            | 取消按钮文案                                   | string                   | `”取消“`       |
+| ok-text                | 确定按钮文案                                   | string                   | `”确 定“`      |
+| cancel-auto-close      | 取消按钮是否默认关闭弹窗                             | boolean                  | `true`       |
+| text-align             | 文字对齐方向，可选值同 `css` 的 `text-align`         | string                   | `"center"`   |
+| close-on-popstate `H5` | 是否在页面回退时自动关闭                             | boolean                  | `false`      |
+| lock-scroll `H5`       | 背景是否锁定                                   | boolean                  | `true`       |
+| footer-direction       | 使用横纵方向 可选值 `horizontal`、`vertical`       | string                   | `horizontal` |
+| overlay-class          | 自定义遮罩类名                                  | string                   | -            |
+| overlay-style          | 自定义遮罩样式                                  | CSSProperties            | -            |
+| pop-class              | 自定义 `popup` 弹框类名                         | string                   | -            |
+| pop-style              | 自定义 `popup` 弹框样式                         | CSSProperties            | -            |
+| custom-class           | 自定义 `class`                              | string                   | -            |
 | before-close           | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 `Promise` | Function(action: string) | -            |
-| ok-auto-close `v1.3.0` | 确认按钮是否默认关闭弹窗                                      | boolean                  | `true`       |
+| ok-auto-close `1.3.0`  | 确认按钮是否默认关闭弹窗                             | boolean                  | `true`       |
 
 ### Events
 
-| 事件名 | 说明         | 类型     | 默认值 |
-| ------ | ------------ | -------- | ------ |
-| ok     | 确定按钮回调 | Function | -      |
-| cancel | 取消按钮回调 | Function | -      |
-| closed | 关闭弹框回调 | Function | -      |
-| opened | 打开弹框回调 | Function | -      |
+| 事件名    | 说明     | 类型       | 默认值 |
+|--------|--------|----------|-----|
+| ok     | 确定按钮回调 | Function | -   |
+| cancel | 取消按钮回调 | Function | -   |
+| closed | 关闭弹框回调 | Function | -   |
+| opened | 打开弹框回调 | Function | -   |
 
 ### Slots
 
-| 名称    | 说明               |
-| ------- | ------------------ |
-| header  | 自定义标题区域     |
-| default | 自定义内容         |
+| 名称      | 说明        |
+|---------|-----------|
+| header  | 自定义标题区域   |
+| default | 自定义内容     |
 | footer  | 自定义底部按钮区域 |
 
 ### Methods
 
 通过 [ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) 可以获取到 Form 实例并调用实例方法
 
-| 方法名     | 说明       | 参数            | 返回值 |
-| ---------- | ---------- | --------------- | ------ |
-| showDialog | 弹出Dialog | `DialogOptions` | -      |
-| onOk       | 确认       | -               | -      |
-| onCancel   | 取消       | -               |        |
+| 方法名        | 说明       | 参数              | 返回值 |
+|------------|----------|-----------------|-----|
+| showDialog | 弹出Dialog | `DialogOptions` | -   |
+| onOk       | 确认       | -               | -   |
+| onCancel   | 取消       | -               |     |
 
 ``` ts
 interface DialogOptions {
@@ -194,8 +194,8 @@ interface DialogOptions {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/components/basic/configprovider)。
 
-| 名称                                | 默认值              |
-| ----------------------------------- | ------------------- |
+| 名称                                  | 默认值                 |
+|-------------------------------------|---------------------|
 | --nut-dialog-width                  | 296px               |
 | --nut-dialog-header-font-weight     | normal              |
 | --nut-dialog-header-color           | rgba(38, 38, 38, 1) |
diff --git a/packages/nutui/components/dialog/use-dialog.ts b/packages/nutui/components/dialog/use-dialog.ts
@@ -46,9 +46,11 @@ export function useDialog(props: DialogProps, emit: SetupContext<DialogEmits>['e
 
   onMounted(() => {
     if (props.closeOnPopstate) {
+      // #ifdef H5
       window.addEventListener('popstate', () => {
         closed('page')
       })
+      // #endif
     }
   })
 
