From 1cc4b9f8ac191bf480602edf86bf2edd2b8189f5 Mon Sep 17 00:00:00 2001 From: Marvin Gui <63292605+yi-boide@users.noreply.github.com> Date: Mon, 30 Oct 2023 16:46:12 +0800 Subject: [PATCH] feat(dialog): add ok-auto-close (#2626) (#2627) --- .../__VUE/dialog/__tests__/index.spec.ts | 7 +- src/packages/__VUE/dialog/doc.en-US.md | 142 ++++++++--------- src/packages/__VUE/dialog/doc.md | 144 +++++++++--------- src/packages/__VUE/dialog/doc.taro.md | 81 +++++----- src/packages/__VUE/dialog/index.taro.vue | 8 +- src/packages/__VUE/dialog/index.ts | 19 ++- src/packages/__VUE/dialog/index.vue | 8 +- 7 files changed, 217 insertions(+), 192 deletions(-) diff --git a/src/packages/__VUE/dialog/__tests__/index.spec.ts b/src/packages/__VUE/dialog/__tests__/index.spec.ts index a31102321e..b443e3b771 100644 --- a/src/packages/__VUE/dialog/__tests__/index.spec.ts +++ b/src/packages/__VUE/dialog/__tests__/index.spec.ts @@ -21,7 +21,8 @@ test('Dialog: basic props', async () => { title: 't1', content: 'c1', cancelText: 'cancelText', - okText: 'okText' + okText: 'okText', + okAutoClose: false } }); nextTick(() => { @@ -33,6 +34,10 @@ test('Dialog: basic props', async () => { expect(cancel.html()).includes('cancelText'); const ok = wrapper.find('.nut-dialog__footer-ok'); expect(ok.html()).includes('okText'); + ok.trigger('click'); + nextTick(() => { + expect(wrapper.vm.showPopup).toBeTruthy(); + }); }); }); diff --git a/src/packages/__VUE/dialog/doc.en-US.md b/src/packages/__VUE/dialog/doc.en-US.md index 6a04cdb507..6d6fc8b95d 100644 --- a/src/packages/__VUE/dialog/doc.en-US.md +++ b/src/packages/__VUE/dialog/doc.en-US.md @@ -42,7 +42,7 @@ const onCancel = () => { const onOk = () => { console.log('event ok'); }; -const baseClick = (): void => { +const baseClick = () => { showDialog({ title: 'Basic spring frame', content: createVNode('span', { style: { color: 'red' } }, 'I can be a custom component'), @@ -50,7 +50,7 @@ const baseClick = (): void => { onOk }); }; -const transparentClick = (): void => { +const transparentClick = () => { showDialog({ overlayStyle: { background: 'rgba(0,0,0,0)' }, title: 'Transparent Dialog', @@ -59,7 +59,7 @@ const transparentClick = (): void => { onOk }); }; -const htmlClick = (): void => { +const htmlClick = () => { showDialog({ title: 'Use html', content: @@ -68,13 +68,13 @@ const htmlClick = (): void => { onOk }); }; -const beforeCloseClick = (): void => { +const beforeCloseClick = () => { showDialog({ title: 'Before Close', content: 'Click confirm to close it in 1 second', onCancel, onOk, - beforeClose: (action: string) => { + beforeClose: (action) => { return new Promise((r) => { setTimeout(() => { r(action == 'ok'); @@ -172,7 +172,7 @@ import '@nutui/nutui/dist/packages/dialog/style'; const onCancel = () => { console.log('event cancel'); }; -const teleportClick = (teleport: string) => { +const teleportClick = (teleport) => { showDialog({ teleport, title: 'teleport to ' + teleport, @@ -190,74 +190,76 @@ const teleportClick = (teleport: string) => { ### DialogOptions -| Attribute | Description | Type | Default | -| ------------------- | ------------------------------------------------------------------------------ | ------------------------ | ---------------------- | -| title | Title | string | - | -| id | Identifier, share one instance at the same time, default to multiple instances | string \| object | `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 | Custom dialog class | string | | -| overlayClass | Custom mask classname | string | - | -| overlayStyle | Custom mask styles | CSSProperties | - | -| popClass | Custom popup classname | string | - | -| popStyle | 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 | Emitted when Dialog is opened | Function | - | -| onClosed | Emitted when Dialog is closed | Function | - | -| beforeClose | Callback function before close support return `promise` | Function(action: string) | - | +| Attribute | Description | Type | Default | +| --- | --- | --- | --- | +| title | Title | string | - | +| id | Identifier, share one instance at the same time, default to multiple instances | string \| object | `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` | +| okAutoClose`4.2.1` | Check whether the button closes the popup by default | 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 | Custom dialog class | string | | +| overlayClass | Custom mask classname | string | - | +| overlayStyle | Custom mask styles | CSSProperties | - | +| popClass | Custom popup classname | string | - | +| popStyle | 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 | Emitted when Dialog is opened | Function | - | +| onClosed | Emitted when Dialog is closed | Function | - | +| beforeClose | 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 | `true` | -| 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 | Use `horizontal` and `vertical` optional values | string | `horizontal` | -| overlay-class | Custom mask classname | string | - | -| overlay-style | Custom mask styles | CSSProperties | - | -| pop-class | Custom popup classname | string | - | -| pop-style | Custom popup styles | CSSProperties | - | -| custom-class | Custom dialog class | string | - | -| before-close | Callback function before close support return `promise` | Function(action: 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 | `true` | +| 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` | +| ok-auto-close`4.2.1` | Check whether the button closes the popup by default | 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 | Use `horizontal` and `vertical` optional values | string | `horizontal` | +| overlay-class | Custom mask classname | string | - | +| overlay-style | Custom mask styles | CSSProperties | - | +| pop-class | Custom popup classname | string | - | +| pop-style | Custom popup styles | CSSProperties | - | +| custom-class | Custom dialog class | string | - | +| before-close | 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 | - | -| opened | Emitted when Dialog is Opened | 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 | Emitted when Dialog is Opened | Function | - | ### Slots -| Name | Description | -| ------- | -------------- | -| header | Custom title | +| Name | Description | +| --- | --- | +| header | Custom title | | default | Custom default | -| footer | Custom footer | +| footer | Custom footer | ## Theming @@ -265,9 +267,9 @@ const teleportClick = (teleport: string) => { The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider). -| Name | Default Value | -| ----------------------------------- | --------------------- | -| --nut-dialog-width | _296px_ | -| --nut-dialog-header-font-weight | _normal_ | -| --nut-dialog-header-color | _rgba(38, 38, 38, 1)_ | -| --nut-dialog-footer-justify-content | _space-around_ | +| Name | Default Value | +| --- | --- | +| --nut-dialog-width | _296px_ | +| --nut-dialog-header-font-weight | _normal_ | +| --nut-dialog-header-color | _rgba(38, 38, 38, 1)_ | +| --nut-dialog-footer-justify-content | _space-around_ | diff --git a/src/packages/__VUE/dialog/doc.md b/src/packages/__VUE/dialog/doc.md index 9dd50436f3..80f5c4f351 100644 --- a/src/packages/__VUE/dialog/doc.md +++ b/src/packages/__VUE/dialog/doc.md @@ -42,7 +42,7 @@ const onCancel = () => { const onOk = () => { console.log('event ok'); }; -const baseClick = (): void => { +const baseClick = () => { showDialog({ title: '基础弹框', content: createVNode('span', { style: { color: 'red' } }, '我可以是一个自定义组件'), @@ -50,7 +50,7 @@ const baseClick = (): void => { onOk }); }; -const transparentClick = (): void => { +const transparentClick = () => { showDialog({ overlayStyle: { background: 'rgba(0,0,0,0)' }, title: '透明弹框', @@ -59,7 +59,7 @@ const transparentClick = (): void => { onOk }); }; -const htmlClick = (): void => { +const htmlClick = () => { showDialog({ title: '支持富文本 html', content: @@ -68,13 +68,13 @@ const htmlClick = (): void => { onOk }); }; -const beforeCloseClick = (): void => { +const beforeCloseClick = () => { showDialog({ title: '异步关闭', content: '点击确认后，1秒后关闭', onCancel, onOk, - beforeClose: (action: string) => { + beforeClose: (action) => { return new Promise((r) => { setTimeout(() => { r(action == 'ok'); @@ -172,7 +172,7 @@ import '@nutui/nutui/dist/packages/dialog/style'; const onCancel = () => { console.log('event cancel'); }; -const teleportClick = (teleport: string) => { +const teleportClick = (teleport) => { showDialog({ teleport, title: 'teleport to ' + teleport, @@ -190,74 +190,76 @@ const teleportClick = (teleport: string) => { ### DialogOptions -| 参数 | 说明 | 类型 | 默认值 | -| ------------------- | ------------------------------------------------------------- | ------------------------ | ---------------------- | -| 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 | 自定义 `class` | string | - | -| overlayClass | 自定义遮罩类名 | string | - | -| overlayStyle | 自定义遮罩样式 | CSSProperties | - | -| popClass | 自定义 `popup` 弹框类名 | string | - | -| popStyle | 自定义 `popup` 弹框样式 | CSSProperties | - | -| onUpdate | 更新 | boolean | `false` | -| onOk | 确定按钮回调 | Function | - | -| onCancel | 取消按钮回调 | Function | - | -| onOpened | 打开弹框后回调 | Function | - | -| onClosed | 关闭弹框后回调 | Function | - | -| beforeClose | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 `Promise` | Function(action: string) | - | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| 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` | +| okAutoClose`4.2.1` | 确认按钮是否默认关闭弹窗 | boolean | `true` | +| textAlign | 文字对齐方向，可选值同 `css` 的 `text-align` | string | `"center"` | +| closeOnPopstate | 是否在页面回退时自动关闭 | boolean | `false` | +| customClass | 自定义 `class` | string | - | +| overlayClass | 自定义遮罩类名 | string | - | +| overlayStyle | 自定义遮罩样式 | CSSProperties | - | +| popClass | 自定义 `popup` 弹框类名 | string | - | +| popStyle | 自定义 `popup` 弹框样式 | CSSProperties | - | +| onUpdate | 更新 | boolean | `false` | +| onOk | 确定按钮回调 | Function | - | +| onCancel | 取消按钮回调 | Function | - | +| onOpened | 打开弹框后回调 | Function | - | +| onClosed | 关闭弹框后回调 | Function | - | +| beforeClose | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 `Promise` | Function(action: string) | - | ### Props -| 参数 | 说明 | 类型 | 默认值 | -| ---------------------- | ------------------------------------------------------------- | ------------------------ | ------------ | -| title | 标题 | string | - | -| content | 内容，支持 HTML 和组件 | string \| VNode | | -| teleport | 指定挂载节点 | string | `"body"` | -| 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 | 背景是否锁定 | 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) | - | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| title | 标题 | string | - | +| content | 内容，支持 HTML 和组件 | string \| VNode | | +| teleport | 指定挂载节点 | string | `"body"` | +| 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` | +| ok-auto-close`4.2.1` | 确认按钮是否默认关闭弹窗 | boolean | `true` | +| text-align | 文字对齐方向，可选值同 css 的 text-align | string | `"center"` | +| close-on-popstate | 是否在页面回退时自动关闭 | boolean | `false` | +| lock-scroll | 背景是否锁定 | 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) | - | ### Events -| 事件名 | 说明 | 类型 | 默认值 | -| ------ | ------------ | -------- | ------ | -| ok | 确定按钮回调 | Function | - | -| cancel | 取消按钮回调 | Function | - | -| closed | 关闭弹框回调 | Function | - | -| opened | 打开弹框回调 | Function | - | +| 事件名 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| ok | 确定按钮回调 | Function | - | +| cancel | 取消按钮回调 | Function | - | +| closed | 关闭弹框回调 | Function | - | +| opened | 打开弹框回调 | Function | - | ### Slots -| 名称 | 说明 | -| ------- | ------------------ | -| header | 自定义标题区域 | -| default | 自定义内容 | -| footer | 自定义底部按钮区域 | +| 名称 | 说明 | +| --- | --- | +| header | 自定义标题区域 | +| default | 自定义内容 | +| footer | 自定义底部按钮区域 | ## 主题定制 @@ -265,9 +267,9 @@ const teleportClick = (teleport: string) => { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。 -| 名称 | 默认值 | -| ----------------------------------- | --------------------- | -| --nut-dialog-width | _296px_ | -| --nut-dialog-header-font-weight | _normal_ | -| --nut-dialog-header-color | _rgba(38, 38, 38, 1)_ | -| --nut-dialog-footer-justify-content | _space-around_ | +| 名称 | 默认值 | +| --- | --- | +| --nut-dialog-width | _296px_ | +| --nut-dialog-header-font-weight | _normal_ | +| --nut-dialog-header-color | _rgba(38, 38, 38, 1)_ | +| --nut-dialog-footer-justify-content | _space-around_ | diff --git a/src/packages/__VUE/dialog/doc.taro.md b/src/packages/__VUE/dialog/doc.taro.md index cfe80db064..4d56b048af 100644 --- a/src/packages/__VUE/dialog/doc.taro.md +++ b/src/packages/__VUE/dialog/doc.taro.md @@ -84,7 +84,7 @@ const onOkAsync = () => { }); }; -const baseClick = (): void => { +const baseClick = () => { visible1.value = true; }; const noTitleClick = () => { @@ -111,45 +111,46 @@ const verticalClick = () => { ### Props -| 参数 | 说明 | 类型 | 默认值 | -| ---------------------- | ------------------------------------------------------------- | ------------------------ | ------------ | -| title | 标题 | string | - | -| content | 内容，支持 `HTML` 和组件 | string \| VNode | - | -| teleport | 指定挂载节点 | string | `"body"` | -| 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 | 背景是否锁定 | 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) | - | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| title | 标题 | string | - | +| content | 内容，支持 `HTML` 和组件 | string \| VNode | - | +| teleport | 指定挂载节点 | string | `"body"` | +| 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` | +| ok-auto-close`4.2.1` | 确认按钮是否默认关闭弹窗 | boolean | `true` | +| text-align | 文字对齐方向，可选值同 `css` 的 `text-align ` | string | `"center"` | +| close-on-popstate | 是否在页面回退时自动关闭 | boolean | `false` | +| lock-scroll | 背景是否锁定 | 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) | - | ### Events -| 事件名 | 说明 | 类型 | 默认值 | -| ------ | ------------ | -------- | ------ | -| ok | 确定按钮回调 | Function | - | -| cancel | 取消按钮回调 | Function | - | -| closed | 关闭弹框回调 | Function | - | -| opened | 打开弹框回调 | Function | - | +| 事件名 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| ok | 确定按钮回调 | Function | - | +| cancel | 取消按钮回调 | Function | - | +| closed | 关闭弹框回调 | Function | - | +| opened | 打开弹框回调 | Function | - | ### Slots -| 名称 | 说明 | -| ------- | ------------------ | -| header | 自定义标题区域 | -| default | 自定义内容 | -| footer | 自定义底部按钮区域 | +| 名称 | 说明 | +| --- | --- | +| header | 自定义标题区域 | +| default | 自定义内容 | +| footer | 自定义底部按钮区域 | ## 主题定制 @@ -157,9 +158,9 @@ const verticalClick = () => { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。 -| 名称 | 默认值 | -| ----------------------------------- | --------------------- | -| --nut-dialog-width | _296px_ | -| --nut-dialog-header-font-weight | _normal_ | -| --nut-dialog-header-color | _rgba(38, 38, 38, 1)_ | -| --nut-dialog-footer-justify-content | _space-around_ | +| 名称 | 默认值 | +| --- | --- | +| --nut-dialog-width | _296px_ | +| --nut-dialog-header-font-weight | _normal_ | +| --nut-dialog-header-color | _rgba(38, 38, 38, 1)_ | +| --nut-dialog-footer-justify-content | _space-around_ | diff --git a/src/packages/__VUE/dialog/index.taro.vue b/src/packages/__VUE/dialog/index.taro.vue index 5cb22b0fc6..25f152dbec 100644 --- a/src/packages/__VUE/dialog/index.taro.vue +++ b/src/packages/__VUE/dialog/index.taro.vue @@ -98,6 +98,10 @@ export default create({ type: Boolean, default: true }, + okAutoClose: { + type: Boolean, + default: true + }, textAlign: { type: String, default: 'center' @@ -182,7 +186,9 @@ export default create({ const onOk = () => { emit('ok'); - closed('ok'); + if (props.okAutoClose) { + closed('ok'); + } }; const onClickOverlay = () => { diff --git a/src/packages/__VUE/dialog/index.ts b/src/packages/__VUE/dialog/index.ts index 3980a084be..f8f532ec73 100644 --- a/src/packages/__VUE/dialog/index.ts +++ b/src/packages/__VUE/dialog/index.ts @@ -27,14 +27,17 @@ export class DialogOptions { onClosed?: () => void; beforeClose?: (action: string) => any; - visible?: boolean = true; - noFooter?: boolean = false; - noOkBtn?: boolean = false; - noCancelBtn?: boolean = false; - okBtnDisabled?: boolean = false; - closeOnPopstate?: boolean = false; - closeOnClickOverlay?: boolean = true; - lockScroll?: boolean = true; + visible? = true; + noFooter? = false; + noOkBtn? = false; + noCancelBtn? = false; + okBtnDisabled? = false; + closeOnPopstate? = false; + closeOnClickOverlay? = true; + lockScroll? = true; + + cancelAutoClose? = true; + okAutoClose? = true; } class DialogFunction { diff --git a/src/packages/__VUE/dialog/index.vue b/src/packages/__VUE/dialog/index.vue index aaf88866f4..30d1b250b2 100644 --- a/src/packages/__VUE/dialog/index.vue +++ b/src/packages/__VUE/dialog/index.vue @@ -98,6 +98,10 @@ export default create({ type: Boolean, default: true }, + okAutoClose: { + type: Boolean, + default: true + }, textAlign: { type: String as PropType, default: 'center' @@ -173,7 +177,9 @@ export default create({ const onOk = () => { emit('ok'); - closed('ok'); + if (props.okAutoClose) { + closed('ok'); + } }; const onClickOverlay = () => {