useResizeObserver

类别

Elements

导出体积

508 B

上次更改

8 minutes ago

报告元素内容或边框框的尺寸变化。

示例

源码playground (beta)

调整大小以查看更改

用法

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

const el = useTemplateRef('el')
const text = ref('')

useResizeObserver(el, (entries) => {
  const entry = entries[0]
  const { width, height } = entry.contentRect
  text.value = `width: ${width}, height: ${height}`
})
</script>

<template>
  <div ref="el">
    {{ text }}
  </div>
</template>

Directive Usage

This function also provides a directive version via the @vueuse/components package. Learn more about the usage.

<script setup lang="ts">
import { vResizeObserver } from '@vueuse/components'

const text = ref('')

function onResizeObserver(entries) {
  const [entry] = entries
  const { width, height } = entry.contentRect
  text.value = `width: ${width}, height: ${height}`
}
</script>

<template>
  <div v-resize-observer="onResizeObserver">
    {{ text }}
  </div>
</template>

ResizeObserver MDN

类型声明

显示类型声明

/**
 * @deprecated This interface is now available in the DOM lib.
 * Use the global {@link globalThis.ResizeObserverSize} instead.
 */
export interface ResizeObserverSize {
  readonly inlineSize: number
  readonly blockSize: number
}
/**
 * @deprecated This interface is now available in the DOM lib.
 * Use the global {@link globalThis.ResizeObserverEntry} instead.
 */
export interface ResizeObserverEntry {
  readonly target: Element
  readonly contentRect: DOMRectReadOnly
  readonly borderBoxSize: ReadonlyArray<ResizeObserverSize>
  readonly contentBoxSize: ReadonlyArray<ResizeObserverSize>
  readonly devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize>
}
/**
 * @deprecated This interface is now available in the DOM lib.
 * Use the global {@link globalThis.ResizeObserverCallback} instead.
 */
export type ResizeObserverCallback = (
  entries: ReadonlyArray<ResizeObserverEntry>,
  observer: ResizeObserver,
) => void
export interface UseResizeObserverOptions
  extends ResizeObserverOptions, ConfigurableWindow {}
/**
 * 监听元素内容或边框盒尺寸的变化
 *
 * @see https://vueuse.org/useResizeObserver
 * @param target
 * @param callback
 * @param options
 */
export declare function useResizeObserver(
  target:
    | MaybeComputedElementRef
    | MaybeComputedElementRef[]
    | MaybeRefOrGetter<MaybeElement[]>,
  callback: globalThis.ResizeObserverCallback,
  options?: UseResizeObserverOptions,
): {
  isSupported: ComputedRef<boolean>
  stop: () => void
}
export type UseResizeObserverReturn = ReturnType<typeof useResizeObserver>

源码

源码 • 演示 • 文档

贡献者

一纸忘忧

更新日志

没有最近的更新日志