feat(dialog): add popClass、popStyle、beforeClose

src/packages/__VUE/dialog/demo.vue

@@ -2,6 +2,9 @@
   <div class="demo">
     <nut-cell-group :title="translate('funUse')">
       <nut-cell :title="translate('basic')" @click="baseClick"></nut-cell>
+      <nut-cell :title="translate('transparent')" @click="transparentClick"></nut-cell>
+      <nut-cell :title="translate('html')" @click="htmlClick"></nut-cell>
+      <nut-cell :title="translate('beforeClose')" @click="beforeCloseClick"></nut-cell>
       <nut-cell :title="translate('noTitle')" @click="noTitleClick"></nut-cell>
       <nut-cell :title="translate('tipDialog')" @click="tipsClick"></nut-cell>
       <nut-cell :title="translate('title')" @click="verticalClick"></nut-cell>
@@ -42,6 +45,9 @@ useTranslate({
   'zh-CN': {
     funUse: '函数式调用',
     basic: '基础弹框',
+    transparent: '透明弹框',
+    html: '支持富文本 html',
+    beforeClose: '异步关闭',
     noTitle: '无标题弹框',
     tipDialog: '提示弹框',
     tips: '提示',
@@ -51,11 +57,15 @@ useTranslate({
     content: '支持函数调用和组件调用两种方式。',
     content1: '支持底部按钮纵向排列。',
     content2: '打开开发者工具看一下 Elements Tab',
-    content3: '我可以是一个自定义组件'
+    content3: '我可以是一个自定义组件',
+    content4: '点击确认后，1秒后关闭'
   },
   'en-US': {
     funUse: 'Function use',
     basic: 'Basic Usage',
+    transparent: 'Transparent Dialog',
+    html: 'Use html',
+    beforeClose: 'Before Close',
     noTitle: 'No Title',
     tipDialog: 'Tips Dialog',
     tips: 'Tips',
@@ -65,7 +75,8 @@ useTranslate({
     content: 'Function call and template call are supported.',
     content1: 'Support vertical arrangement of bottom buttons.',
     content2: 'Open the developer tool and take a look at the Elements tab',
-    content3: 'I can be a custom component'
+    content3: 'I can be a custom component',
+    content4: 'Click confirm to close it in 1 second'
   }
 });
 export default createDemo({
@@ -88,6 +99,43 @@ export default createDemo({
         onOk
       });
     };
+
+    const transparentClick = (): void => {
+      Dialog({
+        overlayStyle: { background: 'rgba(0,0,0,0)' },
+        title: translate('transparent'),
+        content: 'Content',
+        onCancel,
+        onOk
+      });
+    };
+
+    const htmlClick = (): void => {
+      Dialog({
+        title: translate('html'),
+        content:
+          "<p style='color:red'>html</p><img src='https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif' />",
+        onCancel,
+        onOk
+      });
+    };
+
+    const beforeCloseClick = (): void => {
+      Dialog({
+        title: translate('beforeClose'),
+        content: translate('content4'),
+        onCancel,
+        onOk,
+        beforeClose: (action: string) => {
+          return new Promise((r) => {
+            setTimeout(() => {
+              r(action == 'ok');
+            }, 1000);
+          });
+        }
+      });
+    };
+
     const noTitleClick = () => {
       Dialog({
         content: translate('noTitle'),
@@ -135,6 +183,9 @@ export default createDemo({
       visible,
       visible1,
       baseClick,
+      transparentClick,
+      htmlClick,
+      beforeCloseClick,
       noTitleClick,
       componentClick,
       componentvVrticalClick,

src/packages/__VUE/dialog/doc.en-US.md

@@ -24,14 +24,17 @@ app.use(Dialog).use(Popup).use(OverLay)
 ```html
 <template>
  <nut-cell-group title="Function Use">
-  <nut-cell title="Title" @click="baseClick"></nut-cell>
-  <nut-cell title="Title" @click="noTitleClick"></nut-cell>
-  <nut-cell title="Title" @click="tipsClick"></nut-cell>
-  <nut-cell title="Title" @click="verticalClick"></nut-cell>
-</nut-cell-group>
+  <nut-cell title="Basic Usage" @click="baseClick"></nut-cell>
+  <nut-cell title="Transparent Dialog" @click="transparentClick"></nut-cell>
+  <nut-cell title="Use html" @click="htmlClick"></nut-cell>
+  <nut-cell title="Before Close" @click="beforeCloseClick"></nut-cell>
+  <nut-cell title="No Title" @click="noTitleClick"></nut-cell>
+  <nut-cell title="Tips Dialog" @click="tipsClick"></nut-cell>
+  <nut-cell title="Bottom button vertical use" @click="verticalClick"></nut-cell>
+ </nut-cell-group>
 </template>
 <script lang="ts">
-import { ref } from 'vue';
+import { ref,createVNode } from 'vue';
 import { Dialog } from '@nutui/nutui';
 export default {
     setup() {
@@ -49,6 +52,39 @@ export default {
             onOk
           });
         };
+        const transparentClick = (): void => {
+          Dialog({
+            overlayStyle: { background: 'rgba(0,0,0,0)' },
+            title: 'Transparent Dialog',
+            content: 'Content',
+            onCancel,
+            onOk
+          });
+        };
+        const htmlClick = (): void => {
+          Dialog({
+            title: "Use html",
+            content:
+              "<p style='color:red'>html</p><img src='https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif' />",
+            onCancel,
+            onOk
+          });
+        };
+        const beforeCloseClick = (): void => {
+          Dialog({
+            title: 'Before Close',
+            content: 'Click confirm to close it in 1 second',
+            onCancel,
+            onOk,
+            beforeClose: (action: string) => {
+              return new Promise((r) => {
+                setTimeout(() => {
+                  r(action == 'ok');
+                }, 1000);
+              });
+            }
+          });
+        };
         const noTitleClick = () => {
           Dialog({
             content: 'Content',
@@ -76,6 +112,9 @@ export default {
         };
         return {
           baseClick,
+          transparentClick,
+          htmlClick,
+          beforeCloseClick,
           noTitleClick,
           tipsClick,
           verticalClick
@@ -168,57 +207,67 @@ export default {
 :::
 
 ## API
-| Attribute            | Description                                                                    | Type             | Default              |
-|----------------------|--------------------------------------------------------------------------------|------------------|----------------------|
-| title                | Title                                                                          | String           | -                    |
-| id                   | Identifier, share one instance at the same time, default to multiple instances | String or Number | new Date().getTime() |
-| content              | Content, support HTML                                                          | String           | -                    |
-| teleport             | Specifies a target element where Dialog will be mounted                        | String           | "body"               |
-| closeOnClickOverlay  | Whether to close when overlay is clicked                                       | Boolean          | false                |
-| noFooter             | Hide bottom button bar                                                         | Boolean          | false                |
-| noOkBtn              | Hide OK button                                                                 | Boolean          | false                |
-| noCancelBtn          | Hide cancel button                                                             | Boolean          | false                |
-| cancelText           | Cancel button text                                                             | String           | "Cancel"             |
-| okText               | OK button text                                                                 | String           | "Confirm"            |
-| cancelAutoClose      | Click Cancel to close the popup                                                | Boolean          | true                 |
-| textAlign            | Text alignment direction, the optional value is the same as css text-align     | String           | "center"             |
-| closeOnPopstate      | Whether to close when popstate                                                 | Boolean          | false                |
-| customClass`v3.1.22` | Custom dialog class                                                            | String           |                      |
-| onUpdate             | Update                                                                         | Boolean          | false                |
-| onOk                 | Emitted when the confirm button is clicked                                     | Function         | -                    |
-| onCancel             | Emitted when the cancel button is clicked                                      | Function         | -                    |
-| onClosed             | Emitted when Dialog is closed                                                  | Function         | -                    |
+| Attribute             | Description                                                                    | Type                     | Default              |
+|-----------------------|--------------------------------------------------------------------------------|--------------------------|----------------------|
+| title                 | Title                                                                          | String                   | -                    |
+| id                    | Identifier, share one instance at the same time, default to multiple instances | String or Number         | new Date().getTime() |
+| content               | Content, support HTML                                                          | String                   | -                    |
+| teleport              | Specifies a target element where Dialog will be mounted                        | String                   | "body"               |
+| closeOnClickOverlay   | Whether to close when overlay is clicked                                       | Boolean                  | false                |
+| noFooter              | Hide bottom button bar                                                         | Boolean                  | false                |
+| noOkBtn               | Hide OK button                                                                 | Boolean                  | false                |
+| noCancelBtn           | Hide cancel button                                                             | Boolean                  | false                |
+| cancelText            | Cancel button text                                                             | String                   | "Cancel"             |
+| okText                | OK button text                                                                 | String                   | "Confirm"            |
+| cancelAutoClose       | Click Cancel to close the popup                                                | Boolean                  | true                 |
+| textAlign             | Text alignment direction, the optional value is the same as css text-align     | String                   | "center"             |
+| closeOnPopstate       | Whether to close when popstate                                                 | Boolean                  | false                |
+| customClass`v3.1.22`  | Custom dialog class                                                            | String                   |                      |
+| overlayClass`v3.1.22` | Custom mask classname                                                          | String                   | -                    |
+| overlayStyle`v3.1.22` | Custom mask styles                                                             | CSSProperties            | -                    |
+| popClass  `v3.1.22`   | Custom popup classname                                                         | String                   | -                    |
+| popStyle  `v3.1.22`   | Custom popup styles                                                            | CSSProperties            | -                    |
+| onUpdate              | Update                                                                         | Boolean                  | false                |
+| onOk                  | Emitted when the confirm button is clicked                                     | Function                 | -                    |
+| onCancel              | Emitted when the cancel button is clicked                                      | Function                 | -                    |
+| onOpened`v3.1.22`     | Emitted when Dialog is opened                                                  | Function                 | -                    |
+| onClosed              | Emitted when Dialog is closed                                                  | Function                 | -                    |
+| beforeClose`v3.1.22`  | Callback function before close support return `promise`                        | Function(action: string) | -                    |
 
 
 ## Props
 
-| Attribute              | Description                                                                                               | Type          | Default    |
-|------------------------|-----------------------------------------------------------------------------------------------------------|---------------|------------|
-| title                  | Title                                                                                                     | String        | -          |
-| content                | Content, support HTML                                                                                     | String        | -          |
-| teleport               | Specifies a target element where Dialog will be mounted                                                   | String        | "body"     |
-| close-on-click-overlay | Whether to close when overlay is clicked                                                                  | Boolean       | false      |
-| no-footer              | Hide bottom button bar                                                                                    | Boolean       | false      |
-| no-ok-btn              | Hide OK button                                                                                            | Boolean       | false      |
-| no-cancel-btn          | Hide cancel button                                                                                        | Boolean       | false      |
-| cancel-text            | Cancel button text                                                                                        | String        | "Cancel"   |
-| ok-text                | OK button text                                                                                            | String        | "Confirm"  |
-| cancel-auto-close      | Click Cancel to close the popup                                                                           | Boolean       | true       |
-| text-align             | Text alignment direction, the optional value is the same as css text-align                                | String        | "center"   |
-| close-on-popstate      | Whether to close when popstate                                                                            | Boolean       | false      |
-| lock-scroll            | Whether to lock background scroll                                                                         | Boolean       | false      |
-| footer-direction       | The bottom button uses the horizontal and vertical directions. Optional values ​​are horizontal and vertical. | string        | horizontal |
-| overlay-class`v3.1.21` | Custom mask classname                                                                                     | String        | -          |
-| overlay-style`v3.1.21` | Custom mask styles                                                                                        | CSSProperties | -          |
-| custom-class`v3.1.22`  | Custom dialog class                                                                                       | String        | -          |
+| Attribute              | Description                                                                                               | Type                     | Default    |
+|------------------------|-----------------------------------------------------------------------------------------------------------|--------------------------|------------|
+| title                  | Title                                                                                                     | String                   | -          |
+| content                | Content, support HTML                                                                                     | String                   | -          |
+| teleport               | Specifies a target element where Dialog will be mounted                                                   | String                   | "body"     |
+| close-on-click-overlay | Whether to close when overlay is clicked                                                                  | Boolean                  | false      |
+| no-footer              | Hide bottom button bar                                                                                    | Boolean                  | false      |
+| no-ok-btn              | Hide OK button                                                                                            | Boolean                  | false      |
+| no-cancel-btn          | Hide cancel button                                                                                        | Boolean                  | false      |
+| cancel-text            | Cancel button text                                                                                        | String                   | "Cancel"   |
+| ok-text                | OK button text                                                                                            | String                   | "Confirm"  |
+| cancel-auto-close      | Click Cancel to close the popup                                                                           | Boolean                  | true       |
+| text-align             | Text alignment direction, the optional value is the same as css text-align                                | String                   | "center"   |
+| close-on-popstate      | Whether to close when popstate                                                                            | Boolean                  | false      |
+| lock-scroll            | Whether to lock background scroll                                                                         | Boolean                  | false      |
+| footer-direction       | The bottom button uses the horizontal and vertical directions. Optional values ​​are horizontal and vertical. | string                   | horizontal |
+| overlay-class`v3.1.22` | Custom mask classname                                                                                     | String                   | -          |
+| overlay-style`v3.1.22` | Custom mask styles                                                                                        | CSSProperties            | -          |
+| pop-class  `v3.1.22`   | Custom popup classname                                                                                    | String                   | -          |
+| pop-style  `v3.1.22`   | Custom popup styles                                                                                       | CSSProperties            | -          |
+| custom-class`v3.1.22`  | Custom dialog class                                                                                       | String                   | -          |
+| before-close`v3.1.22`  | Callback function before close support return `promise`                                                   | Function(action: string) | -          |
 
 ## Events
 
-| Event  | Description                                | Type     | Default |
-|--------|--------------------------------------------|----------|---------|
-| ok     | Emitted when the confirm button is clicked | Function | -       |
-| cancel | Emitted when the cancel button is clicked  | Function | -       |
-| closed | Emitted when Dialog is closed              | Function | -       |
+| Event           | Description                                | Type     | Default |
+|-----------------|--------------------------------------------|----------|---------|
+| ok              | Emitted when the confirm button is clicked | Function | -       |
+| cancel          | Emitted when the cancel button is clicked  | Function | -       |
+| closed          | Emitted when Dialog is closed              | Function | -       |
+| opened`v3.1.22` | Emitted when Dialog is Opened              | Function | -       |
 
 
 ## Slots

src/packages/__VUE/dialog/doc.md

@@ -18,20 +18,23 @@ app.use(Dialog).use(Popup).use(OverLay)
 ```
 
 
-## 函数调用
+## 函数调用（小程序模式暂不支持）
 
 :::demo
 ```html
 <template>
  <nut-cell-group title="函数式调用">
   <nut-cell title="基础弹框" @click="baseClick"></nut-cell>
+  <nut-cell title="透明弹框" @click="transparentClick"></nut-cell>
+  <nut-cell title="支持富文本 html" @click="htmlClick"></nut-cell>
+  <nut-cell title="异步关闭" @click="beforeCloseClick"></nut-cell>
   <nut-cell title="无标题弹框" @click="noTitleClick"></nut-cell>
   <nut-cell title="提示弹框" @click="tipsClick"></nut-cell>
   <nut-cell title="底部按钮 垂直调用" @click="verticalClick"></nut-cell>
-</nut-cell-group>
+ </nut-cell-group>
 </template>
 <script lang="ts">
-import { ref } from 'vue';
+import { ref,createVNode } from 'vue';
 import { Dialog } from '@nutui/nutui';
 export default {
     setup() {
@@ -49,6 +52,39 @@ export default {
             onOk
           });
         };
+        const transparentClick = (): void => {
+          Dialog({
+            overlayStyle: { background: 'rgba(0,0,0,0)' },
+            title: '透明弹框',
+            content: 'Content',
+            onCancel,
+            onOk
+          });
+        };
+        const htmlClick = (): void => {
+          Dialog({
+            title: "支持富文本 html",
+            content:
+              "<p style='color:red'>html</p><img src='https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif' />",
+            onCancel,
+            onOk
+          });
+        };
+        const beforeCloseClick = (): void => {
+          Dialog({
+            title: '异步关闭',
+            content: '点击确认后，1秒后关闭',
+            onCancel,
+            onOk,
+            beforeClose: (action: string) => {
+              return new Promise((r) => {
+                setTimeout(() => {
+                  r(action == 'ok');
+                }, 1000);
+              });
+            }
+          });
+        };
         const noTitleClick = () => {
           Dialog({
             content: '无标题弹框',
@@ -76,6 +112,9 @@ export default {
         };
         return {
           baseClick,
+          transparentClick,
+          htmlClick,
+          beforeCloseClick,
           noTitleClick,
           tipsClick,
           verticalClick
@@ -168,56 +207,67 @@ export default {
 :::
 
 ## API
-| 字段                 | 说明                                       | 类型          | 默认值               |
-|----------------------|--------------------------------------------|---------------|----------------------|
-| title                | 标题                                       | String        | -                    |
-| id                   | 标识符，相同时共用一个实例，默认为多个实例 | String/Number | new Date().getTime() |
-| content              | 内容，支持HTML和组件                       | String/VNode  | -                    |
-| teleport             | 指定挂载节点                               | String        | "body"               |
-| closeOnClickOverlay  | 点击蒙层是否关闭对话框                     | Boolean       | false                |
-| noFooter             | 是否隐藏底部按钮栏                         | Boolean       | false                |
-| noOkBtn              | 是否隐藏确定按钮                           | Boolean       | false                |
-| noCancelBtn          | 是否隐藏取消按钮                           | Boolean       | false                |
-| cancelText           | 取消按钮文案                               | String        | ”取消“               |
-| okText               | 确定按钮文案                               | String        | ”确定“               |
-| cancelAutoClose      | 取消按钮是否默认关闭弹窗                   | Boolean       | true                 |
-| textAlign            | 文字对齐方向，可选值同css的text-align      | String        | "center"             |
-| closeOnPopstate      | 是否在页面回退时自动关闭                   | Boolean       | false                |
-| customClass`v3.1.22` | 自定义class                                | String        |                      |
-| onUpdate             | 更新                                       | Boolean       | false                |
-| onOk                 | 确定按钮回调                               | Function      | -                    |
-| onCancel             | 取消按钮回调                               | Function      | -                    |
-| onClosed             | 关闭回调，任何情况关闭弹窗都会触发         | Function      | -                    |
+| 字段                  | 说明                                                          | 类型                     | 默认值               |
+|-----------------------|---------------------------------------------------------------|--------------------------|----------------------|
+| title                 | 标题                                                          | String                   | -                    |
+| id                    | 标识符，相同时共用一个实例，默认为多个实例                    | String/Number            | new Date().getTime() |
+| content               | 内容，支持HTML和组件                                          | String/VNode             | -                    |
+| teleport              | 指定挂载节点                                                  | String                   | "body"               |
+| closeOnClickOverlay   | 点击蒙层是否关闭对话框                                        | Boolean                  | false                |
+| noFooter              | 是否隐藏底部按钮栏                                            | Boolean                  | false                |
+| noOkBtn               | 是否隐藏确定按钮                                              | Boolean                  | false                |
+| noCancelBtn           | 是否隐藏取消按钮                                              | Boolean                  | false                |
+| cancelText            | 取消按钮文案                                                  | String                   | ”取消“               |
+| okText                | 确定按钮文案                                                  | String                   | ”确定“               |
+| cancelAutoClose       | 取消按钮是否默认关闭弹窗                                      | Boolean                  | true                 |
+| textAlign             | 文字对齐方向，可选值同css的text-align                         | String                   | "center"             |
+| closeOnPopstate       | 是否在页面回退时自动关闭                                      | Boolean                  | false                |
+| customClass`v3.1.22`  | 自定义class                                                   | String                   |                      |
+| overlayClass`v3.1.22` | 自定义遮罩类名                                                | String                   | -                    |
+| overlayStyle`v3.1.22` | 自定义遮罩样式                                                | CSSProperties            | -                    |
+| popClass  `v3.1.22`   | 自定义popup弹框类名                                           | String                   | -                    |
+| popStyle  `v3.1.22`   | 自定义popup弹框样式                                           | CSSProperties            | -                    |
+| onUpdate              | 更新                                                          | Boolean                  | false                |
+| onOk                  | 确定按钮回调                                                  | Function                 | -                    |
+| onCancel              | 取消按钮回调                                                  | Function                 | -                    |
+| onOpened`v3.1.22`     | 打开弹框后回调                                                | Function                 | -                    |
+| onClosed              | 关闭弹框后回调                                                | Function                 | -                    |
+| beforeClose`v3.1.22`  | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 `Promise` | Function(action: string) | -                    |
 
 
 ## Props
 
-| 字段                   | 说明                                     | 类型          | 默认值     |
-|------------------------|------------------------------------------|---------------|------------|
-| title                  | 标题                                     | String        | -          |
-| content                | 内容，支持HTML和组件                     | String/VNode  | -          |
-| teleport               | 指定挂载节点                             | String        | "body"     |
-| close-on-click-overlay | 点击蒙层是否关闭对话框                   | Boolean       | false      |
-| 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            | 背景是否锁定                             | Boolean       | false      |
-| footer-direction       | 使用横纵方向 可选值 horizontal、vertical | string        | horizontal |
-| overlay-class`v3.1.21` | 自定义遮罩类名                           | String        | -          |
-| overlay-style`v3.1.21` | 自定义遮罩样式                           | CSSProperties | -          |
-| custom-class`v3.1.22`  | 自定义class                              | String        | -          |
+| 字段                   | 说明                                                          | 类型                     | 默认值     |
+|------------------------|---------------------------------------------------------------|--------------------------|------------|
+| title                  | 标题                                                          | String                   | -          |
+| content                | 内容，支持HTML和组件                                          | String/VNode             | -          |
+| teleport               | 指定挂载节点                                                  | String                   | "body"     |
+| close-on-click-overlay | 点击蒙层是否关闭对话框                                        | Boolean                  | false      |
+| 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            | 背景是否锁定                                                  | Boolean                  | false      |
+| footer-direction       | 使用横纵方向 可选值 horizontal、vertical                      | string                   | horizontal |
+| overlay-class`v3.1.22` | 自定义遮罩类名                                                | String                   | -          |
+| overlay-style`v3.1.22` | 自定义遮罩样式                                                | CSSProperties            | -          |
+| pop-class  `v3.1.22`   | 自定义popup弹框类名                                           | String                   | -          |
+| pop-style  `v3.1.22`   | 自定义popup弹框样式                                           | CSSProperties            | -          |
+| custom-class`v3.1.22`  | 自定义class                                                   | String                   | -          |
+| before-close`v3.1.22`  | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 `Promise` | Function(action: string) | -          |
+
 ## Events
 
-| 字段   | 说明                               | 类型     | 默认值 |
-|--------|------------------------------------|----------|--------|
-| ok     | 确定按钮回调                       | Function | -      |
-| cancel | 取消按钮回调                       | Function | -      |
-| closed | 关闭回调，任何情况关闭弹窗都会触发 | Function | -      |
+| 字段   | 说明         | 类型     | 默认值 |
+|--------|--------------|----------|--------|
+| ok     | 确定按钮回调 | Function | -      |
+| cancel | 取消按钮回调 | Function | -      |
+| closed | 关闭弹框回调 | Function | -      |
+| opened | 打开弹框回调 | Function | -      |
 
 
 ## Slots

src/packages/__VUE/dialog/doc.taro.md

@@ -114,33 +114,38 @@ export default {
 
 ## Props
 
-| 字段                   | 说明                                     | 类型          | 默认值     |
-|------------------------|------------------------------------------|---------------|------------|
-| title                  | 标题                                     | String        | -          |
-| content                | 内容，支持HTML和组件                     | String/VNode  | -          |
-| teleport               | 指定挂载节点                             | String        | "body"     |
-| close-on-click-overlay | 点击蒙层是否关闭对话框                   | Boolean       | false      |
-| 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            | 背景是否锁定                             | Boolean       | false      |
-| footer-direction       | 使用横纵方向 可选值 horizontal、vertical | string        | horizontal |
-| overlay-class`v3.1.21` | 自定义遮罩类名                           | String        | -          |
-| overlay-style`v3.1.21` | 自定义遮罩样式                           | CSSProperties | -          |
-| custom-class`v3.1.22`  | 自定义class                              | String        | -          |
+| 字段                   | 说明                                                          | 类型                     | 默认值     |
+|------------------------|---------------------------------------------------------------|--------------------------|------------|
+| title                  | 标题                                                          | String                   | -          |
+| content                | 内容，支持HTML和组件                                          | String/VNode             | -          |
+| teleport               | 指定挂载节点                                                  | String                   | "body"     |
+| close-on-click-overlay | 点击蒙层是否关闭对话框                                        | Boolean                  | false      |
+| 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            | 背景是否锁定                                                  | Boolean                  | false      |
+| footer-direction       | 使用横纵方向 可选值 horizontal、vertical                      | string                   | horizontal |
+| overlay-class`v3.1.22` | 自定义遮罩类名                                                | String                   | -          |
+| overlay-style`v3.1.22` | 自定义遮罩样式                                                | CSSProperties            | -          |
+| pop-class  `v3.1.22`   | 自定义popup弹框类名                                           | String                   | -          |
+| pop-style  `v3.1.22`   | 自定义popup弹框样式                                           | CSSProperties            | -          |
+| custom-class`v3.1.22`  | 自定义class                                                   | String                   | -          |
+| before-close`v3.1.22`  | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 `Promise` | Function(action: string) | -          |
+
 
 ## Events
 
-| 字段   | 说明                               | 类型     | 默认值 |
-|--------|------------------------------------|----------|--------|
-| ok     | 确定按钮回调                       | Function | -      |
-| cancel | 取消按钮回调                       | Function | -      |
-| closed | 关闭回调，任何情况关闭弹窗都会触发 | Function | -      |
+| 字段   | 说明         | 类型     | 默认值 |
+|--------|--------------|----------|--------|
+| ok     | 确定按钮回调 | Function | -      |
+| cancel | 取消按钮回调 | Function | -      |
+| closed | 关闭弹框回调 | Function | -      |
+| opened | 打开弹框回调 | Function | -      |
 
 
 ## Slots

src/packages/__VUE/dialog/index.scss

@@ -51,6 +51,7 @@
 
     .nut-button {
       min-width: 100px;
+      overflow: hidden;
     }
 
     &-cancel {

src/packages/__VUE/dialog/index.taro.vue

@@ -4,8 +4,10 @@
     v-model:visible="showPopup"
     :close-on-click-overlay="closeOnClickOverlay"
     :lock-scroll="lockScroll"
-    :pop-class="overlayClass"
-    :style="overlayStyle"
+    :pop-class="popClass"
+    :style="popStyle"
+    :overlay-class="overlayClass"
+    :overlay-style="overlayStyle"
     round
     @click-overlay="closed"
     @click-close-icon="closed"
@@ -44,11 +46,12 @@
   </nut-popup>
 </template>
 <script lang="ts">
-import { onMounted, computed, watch, ref, PropType, VNode } from 'vue';
+import { onMounted, computed, watch, ref, PropType, VNode, CSSProperties } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('dialog');
 import Popup, { popupProps } from '../popup/index.taro.vue';
 import Button from '../button/index.taro.vue';
+import { isPromise } from '@/packages/utils/util';
 export default create({
   inheritAttrs: false,
   components: {
@@ -108,15 +111,21 @@ export default create({
     customClass: {
       type: String,
       default: ''
+    },
+    popStyle: {
+      type: Object as PropType<CSSProperties>
+    },
+    beforeClose: {
+      type: Function
     }
   },
-  emits: ['update', 'update:visible', 'ok', 'cancel', 'open', 'opened', 'close', 'closed'],
+  emits: ['update', 'update:visible', 'ok', 'cancel', 'opened', 'closed'],
   setup(props, { emit }) {
     const showPopup = ref(props.visible);
     onMounted(() => {
       if (props.closeOnPopstate) {
         window.addEventListener('popstate', function () {
-          closed();
+          closed('page');
         });
       }
     });
@@ -125,6 +134,9 @@ export default create({
       () => props.visible,
       (value) => {
         showPopup.value = value;
+        if (value) {
+          emit('opened');
+        }
       }
     );
 
@@ -140,20 +152,34 @@ export default create({
       emit('update:visible', val);
     };
 
-    const closed = () => {
-      update(false);
-      emit('closed');
+    const closed = (action: string) => {
+      if (props.beforeClose) {
+        const result = props.beforeClose(action);
+        if (isPromise(result)) {
+          result.then((bool) => {
+            if (bool) {
+              update(false);
+              emit('closed');
+            } else {
+              // 用户阻止删除
+            }
+          });
+        }
+      } else {
+        update(false);
+        emit('closed');
+      }
     };
 
     const onCancel = () => {
       emit('cancel');
       if (props.cancelAutoClose) {
-        closed();
+        closed('cancel');
       }
     };
 
     const onOk = () => {
-      closed();
+      closed('ok');
       emit('ok');
     };
 

src/packages/__VUE/dialog/index.ts

@@ -1,5 +1,5 @@
 import Dialog from './index.vue';
-import { render, createVNode, h, VNode } from 'vue';
+import { render, createVNode, h, VNode, CSSProperties } from 'vue';
 export class DialogOptions {
   title?: string = '';
   content?: string | VNode = '';
@@ -7,6 +7,10 @@ export class DialogOptions {
   okText?: string = '';
   textAlign?: string = 'center';
   customClass?: string = '';
+  overlayStyle?: CSSProperties = {};
+  overlayClass?: string = '';
+  popStyle?: CSSProperties = {};
+  popClass?: string = '';
   teleport?: string | HTMLElement = 'body';
   id?: string | number = new Date().getTime();
   footerDirection?: string = 'horizontal'; //使用横纵方向 可选值 horizontal、vertical
@@ -15,8 +19,9 @@ export class DialogOptions {
   onUpdate?: Function = (value: boolean) => {};
   onOk?: Function = () => {};
   onCancel?: Function = () => {};
-  onClose?: Function = () => {};
+  onOpened?: Function = () => {};
   onClosed?: Function = () => {};
+  beforeClose?: Function;
 
   visible?: boolean = true;
   noFooter?: boolean = false;
@@ -29,7 +34,7 @@ export class DialogOptions {
 
 class DialogFunction {
   options: DialogOptions = new DialogOptions();
-
+  instance: any;
   constructor(_options: DialogOptions) {
     let options = Object.assign(this.options, _options);
     let elWarp: HTMLElement = document.body;
@@ -50,20 +55,23 @@ class DialogFunction {
             elWarp.removeChild(root);
           }
         };
+        if (options?.onOpened) {
+          options?.onOpened();
+        }
         options.teleport = `#${root.id}`;
         return () => {
           return h(Dialog, options);
         };
       }
     };
-    const instance: any = createVNode(Wrapper);
+    this.instance = createVNode(Wrapper);
     elWarp.appendChild(root);
-    render(instance, root);
+    render(this.instance, root);
   }
 
   close = () => {
-    // if (instance) {
-    //   instance.component.ctx.close();
+    // if (this.instance) {
+    //   this.instance.component.ctx.close();
     // }
   };
 

src/packages/__VUE/dialog/index.vue

@@ -4,8 +4,10 @@
     v-model:visible="showPopup"
     :close-on-click-overlay="closeOnClickOverlay"
     :lock-scroll="lockScroll"
-    :pop-class="overlayClass"
-    :style="overlayStyle"
+    :pop-class="popClass"
+    :style="popStyle"
+    :overlay-class="overlayClass"
+    :overlay-style="overlayStyle"
     round
     @click-overlay="closed"
     @click-close-icon="closed"
@@ -44,11 +46,12 @@
   </nut-popup>
 </template>
 <script lang="ts">
-import { onMounted, computed, watch, ref, PropType, VNode } from 'vue';
+import { onMounted, computed, watch, ref, PropType, VNode, CSSProperties } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('dialog');
 import Popup, { popupProps } from '../popup/index.vue';
 import Button from '../button/index.vue';
+import { isPromise } from '@/packages/utils/util';
 export default create({
   inheritAttrs: false,
   components: {
@@ -108,15 +111,21 @@ export default create({
     customClass: {
       type: String,
       default: ''
+    },
+    popStyle: {
+      type: Object as PropType<CSSProperties>
+    },
+    beforeClose: {
+      type: Function
     }
   },
-  emits: ['update', 'update:visible', 'ok', 'cancel', 'open', 'opened', 'close', 'closed'],
+  emits: ['update', 'update:visible', 'ok', 'cancel', 'opened', 'closed'],
   setup(props, { emit }) {
     const showPopup = ref(props.visible);
     onMounted(() => {
       if (props.closeOnPopstate) {
         window.addEventListener('popstate', function () {
-          closed();
+          closed('page');
         });
       }
     });
@@ -125,6 +134,9 @@ export default create({
       () => props.visible,
       (value) => {
         showPopup.value = value;
+        if (value) {
+          emit('opened');
+        }
       }
     );
 
@@ -140,21 +152,35 @@ export default create({
       emit('update:visible', val);
     };
 
-    const closed = () => {
-      update(false);
-      emit('closed');
+    const closed = (action: string) => {
+      if (props.beforeClose) {
+        const result = props.beforeClose(action);
+        if (isPromise(result)) {
+          result.then((bool) => {
+            if (bool) {
+              update(false);
+              emit('closed');
+            } else {
+              // 用户阻止删除
+            }
+          });
+        }
+      } else {
+        update(false);
+        emit('closed');
+      }
     };
 
     const onCancel = () => {
       emit('cancel');
       if (props.cancelAutoClose) {
-        closed();
+        closed('cancel');
       }
     };
 
     const onOk = () => {
       emit('ok');
-      closed();
+      closed('ok');
     };
 
     return {