Skip to content

onElementRemoval

Category
Export Size
735 B
Last Changed
7 months ago

Fires when the element or any element containing it is removed.

Demo

demo1: recreate new element

removed times: 0

demo2: reuse same element

target element
removed times: 0

Usage

vue
<script setup lang="ts">
import { 
onElementRemoval
} from '@vueuse/core'
import {
shallowRef
,
useTemplateRef
} from 'vue'
const
btnRef
=
useTemplateRef
<HTMLElement>('btn')
const
btnState
=
shallowRef
(true)
const
removedCount
=
shallowRef
(0)
function
btnOnClick
() {
btnState
.
value
= !
btnState
.
value
}
onElementRemoval
(
btnRef
, () => ++
removedCount
.
value
)
</script> <template> <
button
v-if="
btnState
"
@
click
="
btnOnClick
"
> recreate me </
button
>
<
button
v-else
ref
="
btnRef
"
@
click
="
btnOnClick
"
> remove me </
button
>
<
b
>removed times: {{
removedCount
}}</
b
>
</template>

Type Declarations

ts
export interface OnElementRemovalOptions
  extends ConfigurableWindow,
    ConfigurableDocumentOrShadowRoot,
    WatchOptionsBase {}
/**
 * Fires when the element or any element containing it is removed.
 *
 * @param target
 * @param callback
 * @param options
 */
export declare function 
onElementRemoval
(
target
:
MaybeElementRef
,
callback
: (
mutationRecords
: MutationRecord[]) => void,
options
?: OnElementRemovalOptions,
):
Fn

Source

SourceDemoDocs

Contributors

Anthony Fu
IlyaL
Anthony Fu
Ben Lau

Changelog

v12.3.0 on
08cf5 - feat: new function, refactor useActiveElement useElementHover (#4410)

Released under the MIT License.

AI-Driven Development
You. But 10x faster
The structured masterclass to help you leverage AI and build with an edge
Join Early