import{o as t,a as n,y as a}from"./vue-libs.b44bc779.js";const e={class:"van-doc-markdown-body"},d=a(`

useRect

\u4ECB\u7ECD

\u83B7\u53D6\u5143\u7D20\u7684\u5927\u5C0F\u53CA\u5176\u76F8\u5BF9\u4E8E\u89C6\u53E3\u7684\u4F4D\u7F6E\uFF0C\u7B49\u4EF7\u4E8E Element.getBoundingClientRect\u3002

\u4EE3\u7801\u6F14\u793A

\u57FA\u672C\u7528\u6CD5

<div ref="root" />

import { ref, onMounted } from 'vue';
import { useRect } from '@vant/use';

export default {
  setup() {
    const root = ref();

    onMounted(() => {
      const rect = useRect(root);
      console.log(rect); // -> \u5143\u7D20\u7684\u5927\u5C0F\u53CA\u5176\u76F8\u5BF9\u4E8E\u89C6\u53E3\u7684\u4F4D\u7F6E
    });

    return { root };
  },
};

API

\u7C7B\u578B\u5B9A\u4E49

function useRect(
  element: Element | Window | Ref<Element | Window | undefined>
): DOMRect;

\u8FD4\u56DE\u503C

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B
width	\u5BBD\u5EA6	number
height	\u9AD8\u5EA6	number
top	\u9876\u90E8\u4E0E\u89C6\u56FE\u7A97\u53E3\u5DE6\u4E0A\u89D2\u7684\u8DDD\u79BB	number
left	\u5DE6\u4FA7\u4E0E\u89C6\u56FE\u7A97\u53E3\u5DE6\u4E0A\u89D2\u7684\u8DDD\u79BB	number
right	\u53F3\u4FA7\u4E0E\u89C6\u56FE\u7A97\u53E3\u5DE6\u4E0A\u89D2\u7684\u8DDD\u79BB	number
bottom	\u5E95\u90E8\u4E0E\u89C6\u56FE\u7A97\u53E3\u5DE6\u4E0A\u89D2\u7684\u8DDD\u79BB	number

`,7),l=[d],h={__name:"use-rect.zh-CN",setup(c,{expose:s}){return s({frontmatter:{}}),(r,p)=>(t(),n("div",e,l))}};export{h as default};