onElementRemoval

类别

传感器

导出体积

727 B

上次更改

6 minutes ago

当该元素或任何包含该元素的元素从 DOM 中被移除时触发。

示例

源码playground (beta)

demo1: recreate new element

removed times: 0

---

demo2: reuse same element

target element

removed times: 0

用法

<script setup lang="ts">
import { onElementRemoval } from '@vueuse/core'
import { shallowRef, useTemplateRef } from 'vue'

const btnRef = useTemplateRef('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>

带有 Mutation Records 的回调

回调函数会接收一个触发移除的 MutationRecord 对象数组。

import { onElementRemoval } from '@vueuse/core'

onElementRemoval(targetRef, (mutationRecords) => {
  console.log('元素已被移除', mutationRecords)
})

返回值

返回一个停止函数，用于停止观察。

const stop = onElementRemoval(targetRef, callback)

// 之后，停止观察
stop()

类型声明

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

源码

源码 • 演示 • 文档

贡献者

一纸忘忧

更新日志

没有最近的更新日志