From 7e3ae66c284156d8eb0504bc13b431c043775622 Mon Sep 17 00:00:00 2001 From: Byron Date: Fri, 3 Nov 2023 14:51:26 +0800 Subject: [PATCH 1/2] feat: new event after wrapper transitionend --- README.md | 4 ++++ README.zh_CN.md | 4 ++++ package/component.ts | 4 +++- 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8ba2ffe..e6f33a5 100644 --- a/README.md +++ b/README.md @@ -93,3 +93,7 @@ export default defineComponent({ | boxStyle | Modify the container style, such as the side background color when displaying in the center, conforming to the Vue two-way binding style standard format | Object | null | | wrapperStyle | Modify the adaptive area style to conform to the Vue two-way binding style standard format | Object | null | | bodyOverflowHidden | After enabling, the body style will be automatically set to `overflow: hidden` | Boolean | true | + +| Event | Desctiption | Params | +| ------------- | ----------------------------| ------- | +| transitionend | after wrapper transitionend | Element | diff --git a/README.zh_CN.md b/README.zh_CN.md index e612173..a18a3d9 100644 --- a/README.zh_CN.md +++ b/README.zh_CN.md @@ -97,3 +97,7 @@ export default defineComponent({ | boxStyle | 修改容器样式，如居中展示时侧边背景色，符合 Vue 双向绑定 style 标准格式 | Object | null | | wrapperStyle | 修改自适应区域样式，符合 Vue 双向绑定 style 标准格式 | Object | null | | bodyOverflowHidden | 启用后body的样式会自动设置为 `overflow: hidden` | Boolean | true | + +| Event | Desctiption | Params | +| ------------- | ----------------------------| ------- | +| transitionend | 自适应区域结束 transition 时 | Element | diff --git a/package/component.ts b/package/component.ts index eb1fea2..a5e47b7 100644 --- a/package/component.ts +++ b/package/component.ts @@ -80,7 +80,8 @@ export default defineComponent({ default: true } }, - setup(props, { slots }) { + emits: ['transitionend'], + setup(props, { slots, emit }) { let bodyOverflowHidden: string const state = reactive({ width: 0, @@ -210,6 +211,7 @@ export default defineComponent({ initBodyStyle() nextTick(async () => { await initSize() + el.value.addEventListener("transitionend", (e) => emit('transitionend', e)) updateSize() updateScale() window.addEventListener('resize', onResize) From 543d0c44549545b70d79dbf536b20617f157f09c Mon Sep 17 00:00:00 2001 From: Byron Date: Fri, 3 Nov 2023 15:00:54 +0800 Subject: [PATCH 2/2] prev: just emit transitionend event when self --- package/component.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/package/component.ts b/package/component.ts index a5e47b7..ea249c2 100644 --- a/package/component.ts +++ b/package/component.ts @@ -211,7 +211,10 @@ export default defineComponent({ initBodyStyle() nextTick(async () => { await initSize() - el.value.addEventListener("transitionend", (e) => emit('transitionend', e)) + el.value.addEventListener("transitionend", (e) => { + if (e.currentTarget !== e.target) return + emit('transitionend', e) + }) updateSize() updateScale() window.addEventListener('resize', onResize)