Skip to content

Commit 4208e11

Browse files
authored
feat(drawer): 补充closed事件,用于标识抽屉关闭动画完成 (#4017)
* feat(drawer): 补充closed事件,用于标识抽屉关闭动画完成 * feat(drawer): 为新增的closed事件添加stable版本信息 * feat(drawer): 版本号修改
1 parent 3d9d209 commit 4208e11

File tree

6 files changed

+34
-5
lines changed

6 files changed

+34
-5
lines changed

examples/sites/demos/apis/drawer.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,21 @@ export default {
236236
pcDemo: 'events',
237237
mfDemo: ''
238238
},
239+
{
240+
name: 'closed',
241+
type: '() => void',
242+
defaultValue: '',
243+
desc: {
244+
'zh-CN': '关闭抽屉动画结束时的事件',
245+
'en-US': 'Event emitted when drawer closing animation ends'
246+
},
247+
mode: ['pc', 'mobile-first'],
248+
pcDemo: 'events',
249+
mfDemo: '',
250+
meta: {
251+
stable: '3.29.0'
252+
}
253+
},
239254
{
240255
name: 'confirm',
241256
type: '() => void',
@@ -371,6 +386,7 @@ interface IDrawerConfigs extends IDrawerProps {
371386
events: {
372387
// 监听事件
373388
close: () => void
389+
closed: () => void
374390
confirm: () => void
375391
show: (instance: Component) => void
376392
},

examples/sites/demos/pc/app/drawer/webdoc/drawer.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,7 @@ export default {
227227
'zh-CN': `
228228
<p><code>open</code>:当抽屉打开时触发;</p>
229229
<p><code>confirm</code>:当抽屉底部确定按钮点击时触发,该按钮仅当设置 <code>show-footer</code> 属性为 true 时可见;</p>
230+
<p><code>closed</code>:当抽屉关闭动画结束时触发;</p>
230231
<p><code>close</code>:当抽屉关闭时触发。关闭抽屉的途径有:</p>
231232
<ul>
232233
<li>点击右上角关闭按钮;</li>
@@ -416,11 +417,11 @@ export default {
416417
support: {
417418
value: true
418419
},
419-
description: '支持 open、confirm、close 等事件。',
420+
description: '支持 open、confirm、close、closed 等事件。',
420421
cloud: {
421422
value: true
422423
},
423-
apis: ['open', 'confirm', 'close'],
424+
apis: ['open', 'confirm', 'close', 'closed'],
424425
demos: ['events']
425426
}
426427
]

packages/renderless/src/drawer/index.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,14 @@ export const close =
3737
api.handleClose('close', typeof force === 'boolean' ? force : false)
3838
}
3939

40+
export const closed =
41+
({ state, emit }: Pick<IDrawerRenderlessParams, 'state' | 'emit'>) =>
42+
() => {
43+
if (!state.visible) {
44+
emit('closed')
45+
}
46+
}
47+
4048
export const watchVisible =
4149
({ state, api }: Pick<IDrawerRenderlessParams, 'state' | 'api'>) =>
4250
(value: boolean) => {

packages/renderless/src/drawer/vue.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
22
close,
3+
closed,
34
watchVisible,
45
confirm,
56
mousedown,
@@ -25,7 +26,7 @@ import type {
2526
ISharedRenderlessParamHooks
2627
} from '@/types'
2728

28-
export const api = ['state', 'close', 'confirm', 'handleClose', 'open']
29+
export const api = ['state', 'close', 'closed', 'confirm', 'handleClose', 'open']
2930

3031
export const renderless = (
3132
props: IDrawerProps,
@@ -49,6 +50,7 @@ export const renderless = (
4950
open: open({ state, emit, vm }),
5051
confirm: confirm({ api }),
5152
close: close({ api }),
53+
closed: closed({ state, emit }),
5254
handleClose: handleClose({ emit, props, state }),
5355
mousedown: mousedown({ state, vm }),
5456
mousemove: mousemove({ state, props, emit }),

packages/renderless/types/drawer.type.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { drawerProps, $constants } from '@/drawer/src'
33
import type {
44
open,
55
close,
6+
closed,
67
watchVisible,
78
confirm,
89
mousedown,
@@ -32,6 +33,7 @@ export interface IDrawerApi {
3233
open: ReturnType<typeof open>
3334
confirm: ReturnType<typeof confirm>
3435
close: ReturnType<typeof close>
36+
closed: ReturnType<typeof closed>
3537
mousemove: ReturnType<typeof mousemove>
3638
mouseup: ReturnType<typeof mouseup>
3739
mousedown: ReturnType<typeof mousedown>

packages/vue/src/drawer/src/pc.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
</transition>
1414

1515
<!-- main -->
16-
<transition :name="`drawer-slide-${placement}`">
16+
<transition :name="`drawer-slide-${placement}`" @after-leave="closed">
1717
<div
1818
data-tag="tiny-drawer-main"
1919
ref="drawerBox"
@@ -167,7 +167,7 @@ export default defineComponent({
167167
'customSlots',
168168
'closeOnPressEscape'
169169
],
170-
emits: ['update:visible', 'open', 'close', 'confirm', 'drag'],
170+
emits: ['update:visible', 'open', 'close', 'closed', 'confirm', 'drag'],
171171
setup(props, context) {
172172
return setup({ props, context, renderless, api })
173173
}

0 commit comments

Comments
 (0)