useElementBounding
HTML 元素的响应式 边界框
¥Reactive bounding box of an HTML element
示例
Resize the box to see changes
用法
¥Usage
vue
<script>
import { useElementBounding } from '@vueuse/core'
import { useTemplateRef } from 'vue'
export default {
setup() {
const el = useTemplateRef('el')
const { x, y, top, right, bottom, left, width, height }
= useElementBounding(el)
return {
el,
/* ... */
}
},
}
</script>
<template>
<div ref="el" />
</template>
组件用法
¥Component Usage
vue
<template>
<UseElementBounding v-slot="{ width, height }">
Width: {{ width }} Height: {{ height }}
</UseElementBounding>
</template>
指令用法
¥Directive Usage
vue
<script setup lang="ts">
import { vElementBounding } from '@vueuse/components'
interface BoundingType {
height: number
bottom: number
left: number
right: number
top: number
width: number
x: number
y: number
}
function onBounding({ height, bottom, left, right, top, width, x, y }: BoundingType) {
console.log(height, bottom, left, right, top, width, x, y)
}
const options = {
reset: true,
windowResize: true,
windowScroll: true,
immediate: true,
updateTiming: 'sync',
}
</script>
<template>
<textarea v-element-bounding="onBounding" />
<!-- with options -->
<textarea v-element-bounding="[onBounding, options]" />
</template>