Skip to content

Commit 4aec36d

Browse files
shenjunjianshenjunjian
authored
fix(dialog-box): add before-close prop and event's doc (#3775)
* fix(dialog-box): add before-close prop and event's doc * fix(docs): fix wrong word * fix(demo): update before-close's demo
1 parent 237d64f commit 4aec36d

File tree

7 files changed

+178
-8
lines changed

7 files changed

+178
-8
lines changed

‎examples/sites/demos/apis/dialog-box.js‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -289,19 +289,31 @@ export default {
289289
},
290290
mode: ['pc'],
291291
pcDemo: 'transition-effect'
292+
},
293+
{
294+
name: 'before-close',
295+
type: '(type) => boolean',
296+
defaultValue: '',
297+
desc: {
298+
'zh-CN': '设置弹窗关闭前的回调函数，如果函数返回 `false`,可以拦截关闭弹窗',
299+
'en-US':
300+
'set the callback function before closing the pop-up. If the function returns `false`, the pop-up will not be closed'
301+
},
302+
mode: ['pc'],
303+
pcDemo: 'before-close'
292304
}
293305
],
294306
events: [
295307
{
296308
name: 'before-close',
297-
type: '(arg:() => void) => void',
309+
type: '(event, hideFn) => void',
298310
defaultValue: '',
299311
desc: {
300-
'zh-CN': 'Dialog 关闭弹窗前，执行的事件',
301-
'en-US': 'Event executed before a dialog window is closed.'
312+
'zh-CN': 'Dialog 关闭弹窗前的事件，通过 event.preventDefault() 可以拦截关闭弹窗',
313+
'en-US': 'Dialog event before closing the pop-up'
302314
},
303315
mode: ['pc'],
304-
pcDemo: 'draggable'
316+
pcDemo: 'before-close'
305317
},
306318
{
307319
name: 'close',

‎examples/sites/demos/pc/app/dialog-box/before-close-composition-api.vue‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<div>
3+
<tiny-button @click="box1 = true" title="属性拦截 Dialog示例">属性拦截 Dialog</tiny-button>
4+
<tiny-button @click="box2 = true" title="事件拦截 Dialog示例">事件拦截 Dialog</tiny-button>
5+
6+
<tiny-dialog-box ref="box1Ref" v-model:visible="box1" title="消息" width="30%" :before-close="beforeCloseProp">
7+
<span>当前窗口有50%的概率关闭</span>
8+
<template #footer>
9+
<tiny-button @click="handleBox1Close">取 消</tiny-button>
10+
<tiny-button type="primary" @click="handleBox1Close">确 定</tiny-button>
11+
</template>
12+
</tiny-dialog-box>
13+
14+
<tiny-dialog-box ref="box2Ref" v-model:visible="box2" title="消息" width="30%" @before-close="onBeforeClose">
15+
<span>当前窗口有50%的概率关闭</span>
16+
<template #footer>
17+
<tiny-button @click="handleBox2Close">取 消</tiny-button>
18+
<tiny-button type="primary" @click="handleBox2Close">确 定</tiny-button>
19+
</template>
20+
</tiny-dialog-box>
21+
</div>
22+
</template>
23+
24+
<script setup lang="jsx">
25+
import { ref } from 'vue'
26+
import { TinyButton, TinyDialogBox, Modal } from '@opentiny/vue'
27+
28+
const box1 = ref(false)
29+
const box2 = ref(false)
30+
const box1Ref = ref()
31+
const box2Ref = ref()
32+
33+
function beforeCloseProp(type) {
34+
// 模拟异步校验，是否需要手动关闭
35+
setTimeout(() => {
36+
if (Math.random() > 0.5) {
37+
box1Ref.value.hide(type) // 手动关闭，使用 box1.value = false 同样效果
38+
} else {
39+
Modal.alert('随机值过小，校验失败')
40+
}
41+
}, 1000)
42+
43+
return false // 拦截关闭
44+
}
45+
function onBeforeClose(event, hideFn) {
46+
// 模拟异步校验，是否需要手动关闭
47+
setTimeout(() => {
48+
if (Math.random() > 0.5) {
49+
hideFn() // 手动关闭，使用 box2.value = false 同样效果
50+
} else {
51+
Modal.alert('随机值过小，校验失败')
52+
}
53+
}, 1000)
54+
55+
event.preventDefault() // 拦截关闭
56+
}
57+
58+
function handleBox1Close() {
59+
box1Ref.value.handleClose()
60+
}
61+
62+
function handleBox2Close() {
63+
box2Ref.value.handleClose()
64+
}
65+
</script>

‎examples/sites/demos/pc/app/dialog-box/before-close.spec.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { test, expect } from '@playwright/test'
2+
3+
test('dialogBox 基础用法', async ({ page }) => {
4+
page.on('pageerror', (exception) => expect(exception).toBeNull())
5+
await page.goto('dialog-box#before-close')
6+
})

‎examples/sites/demos/pc/app/dialog-box/before-close.vue‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<div>
3+
<tiny-button @click="box1 = true" title="属性拦截 Dialog示例">属性拦截 Dialog</tiny-button>
4+
<tiny-button @click="box2 = true" title="事件拦截 Dialog示例">事件拦截 Dialog</tiny-button>
5+
6+
<tiny-dialog-box ref="box1Ref" v-model:visible="box1" title="消息" width="30%" :before-close="beforeCloseProp">
7+
<span>当前窗口有50%的概率关闭</span>
8+
<template #footer>
9+
<tiny-button @click="handleBox1Close">取 消</tiny-button>
10+
<tiny-button type="primary" @click="handleBox1Close">确 定</tiny-button>
11+
</template>
12+
</tiny-dialog-box>
13+
14+
<tiny-dialog-box ref="box2Ref" v-model:visible="box2" title="消息" width="30%" @before-close="onBeforeClose">
15+
<span>当前窗口有50%的概率关闭</span>
16+
<template #footer>
17+
<tiny-button @click="handleBox2Close">取 消</tiny-button>
18+
<tiny-button type="primary" @click="handleBox2Close">确 定</tiny-button>
19+
</template>
20+
</tiny-dialog-box>
21+
</div>
22+
</template>
23+
24+
<script lang="jsx">
25+
import { TinyButton, TinyDialogBox, Modal } from '@opentiny/vue'
26+
27+
export default {
28+
components: {
29+
TinyButton,
30+
TinyDialogBox
31+
},
32+
data() {
33+
return {
34+
box1: false,
35+
box2: false
36+
}
37+
},
38+
methods: {
39+
beforeCloseProp(type) {
40+
// 模拟异步校验，是否需要手动关闭
41+
setTimeout(() => {
42+
if (Math.random() > 0.5) {
43+
this.$refs.box1Ref.hide(type) // 手动关闭，使用 box1.value = false 同样效果
44+
} else {
45+
Modal.alert('随机值过小，校验失败')
46+
}
47+
}, 1000)
48+
49+
return false // 拦截关闭
50+
},
51+
onBeforeClose(event, hideFn) {
52+
// 模拟异步校验，是否需要手动关闭
53+
setTimeout(() => {
54+
if (Math.random() > 0.5) {
55+
hideFn() // 手动关闭，使用 box2.value = false 同样效果
56+
} else {
57+
Modal.alert('随机值过小，校验失败')
58+
}
59+
}, 1000)
60+
61+
event.preventDefault() // 拦截关闭
62+
},
63+
handleBox1Close() {
64+
this.$refs.box1Ref.handleClose()
65+
},
66+
handleBox2Close() {
67+
this.$refs.box2Ref.handleClose()
68+
}
69+
}
70+
}
71+
</script>

‎examples/sites/demos/pc/app/dialog-box/webdoc/dialog-box.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -294,6 +294,22 @@ export default {
294294
},
295295
codeFiles: ['open-close-events.vue']
296296
},
297+
{
298+
demoId: 'before-close',
299+
name: {
300+
'zh-CN': '关闭前拦截',
301+
'en-US': 'before close blocking'
302+
},
303+
desc: {
304+
'zh-CN': `
305+
可通过设置属性<code>before-close</code>,设置对话框关闭前时触发的拦截函数。
306+
也可以通过绑定事件<code>before-close</code>,但它们的用法有细微差异，详见下面示例`,
307+
'en-US': `
308+
You can set the <code>before-close</code> property to define a function that triggers before the dialog box closes.
309+
You can also bind the <code>before-close</code> event, but their usage differs slightly. See the example below.`
310+
},
311+
codeFiles: ['before-close.vue']
312+
},
297313
{
298314
demoId: 'transition-effect',
299315
name: {

‎packages/renderless/src/dialog-box/index.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,9 @@ export const handleClose =
194194
if (typeof props.beforeClose === 'function' && props.beforeClose(type) === false) {
195195
return
196196
}
197+
if (!emitEvent(emit, 'before-close', api.hide)) {
198+
return
199+
}
197200

198201
const el = parent.$el
199202

@@ -202,10 +205,6 @@ export const handleClose =
202205
dialogBoxDom.style.left = ''
203206
}
204207

205-
if (!emitEvent(emit, 'before-close', api.hide)) {
206-
return
207-
}
208-
209208
api.hide(type)
210209
}
211210

‎packages/renderless/src/dialog-box/vue.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export const api = [
4848
'afterEnter',
4949
'afterLeave',
5050
'handleClose',
51+
'hide',
5152
'handleWrapperClick',
5253
'useMouseEventDown',
5354
'useMouseEventUp',

0 commit comments

Comments
 (0)