feat(dialog): add props customClass

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

@@ -168,47 +168,49 @@ 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                |
-| 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           |                      |
+| 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         | -                    |
 
 
 ## 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  | -      |
+| 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        | -          |
 
 ## Events
 

src/packages/__VUE/dialog/doc.md

@@ -168,48 +168,49 @@ 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    |
-| 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        |                      |
+| onUpdate             | 更新                                       | Boolean       | false                |
+| onOk                 | 确定按钮回调                               | Function      | -                    |
+| onCancel             | 取消按钮回调                               | Function      | -                    |
+| onClosed             | 关闭回调，任何情况关闭弹窗都会触发         | Function      | -                    |
 
 
 ## 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  | -      |
-
+| 字段                   | 说明                                     | 类型          | 默认值     |
+|------------------------|------------------------------------------|---------------|------------|
+| 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        | -          |
 ## Events
 
 | 字段   | 说明                               | 类型     | 默认值 |

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

@@ -114,24 +114,25 @@ 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  | -      |
+| 字段                   | 说明                                     | 类型          | 默认值     |
+|------------------------|------------------------------------------|---------------|------------|
+| 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        | -          |
 
 ## Events
 

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

@@ -104,6 +104,10 @@ export default create({
     footerDirection: {
       type: String,
       default: 'horizontal' //vertical
+    },
+    customClass: {
+      type: String,
+      default: ''
     }
   },
   emits: ['update', 'update:visible', 'ok', 'cancel', 'open', 'opened', 'close', 'closed'],
@@ -126,7 +130,8 @@ export default create({
 
     const classes = computed(() => {
       return {
-        [componentName]: true
+        [componentName]: true,
+        [props.customClass]: true
       };
     });
 

src/packages/__VUE/dialog/index.ts

@@ -6,6 +6,7 @@ export class DialogOptions {
   cancelText?: string = '';
   okText?: string = '';
   textAlign?: string = 'center';
+  customClass?: string = '';
   teleport?: string | HTMLElement = 'body';
   id?: string | number = new Date().getTime();
   footerDirection?: string = 'horizontal'; //使用横纵方向 可选值 horizontal、vertical

src/packages/__VUE/dialog/index.vue

@@ -104,6 +104,10 @@ export default create({
     footerDirection: {
       type: String,
       default: 'horizontal' //vertical
+    },
+    customClass: {
+      type: String,
+      default: ''
     }
   },
   emits: ['update', 'update:visible', 'ok', 'cancel', 'open', 'opened', 'close', 'closed'],
@@ -126,7 +130,8 @@ export default create({
 
     const classes = computed(() => {
       return {
-        [componentName]: true
+        [componentName]: true,
+        [props.customClass]: true
       };
     });