vant4中文官网,vant4 表单,vant4 tab,vant4 官网,vant4 cascader 级联多选,vant4 电子签名
Vant4 是一个基于 Vue.js 的移动端组件库。useRect 是 Vant4 提供的一个自定义 Hook，用于获取 DOM 元素的位置和尺寸信息。

useRect 接受一个 ref 参数，返回包含该 DOM 元素位置和尺寸信息的 Rect 对象，包括 left、top、width、height、right 和 bottom 等属性。这个 Hook 可以根据需要在组件中多次调用。

以下是一个使用 useRect 的例子：


<template>
<div ref="box" @click="handleClick">
{{ message }}
</div>
</template>

<script>
import { ref } from 'vue';
import { useRect } from 'vant';

export default {
setup() {
const box = ref(null);
const rect = useRect(box);

function handleClick() {
console.log(rect.left, rect.top);
}

return {
box,
handleClick
};
}
};
</script>


在上面的例子中，我们首先导入了 useRect，并在组件 setup 函数中定义了一个 ref 变量 box。然后将 box 传递给 useRect，从而获取该元素的位置和尺寸信息。最后，在点击事件处理函数 handleClick 中打印了该元素的左上角坐标。