feat(@vant/use): add useRect

packages/vant-use/.vuepress/config.js

@@ -26,6 +26,7 @@ module.exports = {
         title: 'DOM',
         collapsable: false,
         children: [
+          '/src/useRect/',
           '/src/useClickAway/',
           '/src/useEventListener/',
           '/src/usePageVisibility/',

packages/vant-use/src/index.ts

@@ -1,3 +1,4 @@
+export { useRect } from './useRect';
 export { useToggle } from './useToggle';
 export { useClickAway } from './useClickAway';
 export { useWindowSize } from './useWindowSize';

packages/vant-use/src/useRect/README.md

@@ -0,0 +1,46 @@
+# useRect
+
+获取元素的大小及其相对于视口的位置，等价于 [Element.getBoundingClientRect](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect)。
+
+## 代码演示
+
+### 基本用法
+
+```html
+<div ref="root" />
+```
+
+```js
+import { root } from 'vue';
+import { useRect } from '@vant/use';
+
+export default {
+  setup() {
+    const root = ref();
+    const rect = useRect();
+
+    console.log(rect); // -> 元素的大小及其相对于视口的位置
+
+    return { root };
+  },
+};
+```
+
+## API
+
+### 类型定义
+
+```ts
+function useRect((Element | Window) | Ref<Element | Window>): DOMRect;
+```
+
+### 返回值
+
+| 参数   | 说明                       | 类型     |
+| ------ | -------------------------- | -------- |
+| width  | 宽度                       | _number_ |
+| height | 高度                       | _number_ |
+| top    | 顶部与视图窗口左上角的距离 | _number_ |
+| left   | 左侧与视图窗口左上角的距离 | _number_ |
+| right  | 右侧与视图窗口左上角的距离 | _number_ |
+| bottom | 底部与视图窗口左上角的距离 | _number_ |

packages/vant-use/src/useRect/index.ts

@@ -0,0 +1,38 @@
+import { Ref, unref } from 'vue';
+
+function isWindow(val: unknown): val is Window {
+  return val === window;
+}
+
+export const useRect = (
+  elementRef: (Element | Window) | Ref<Element | Window>
+) => {
+  const element = unref(elementRef);
+
+  if (isWindow(element)) {
+    const width = element.innerWidth;
+    const height = element.innerHeight;
+
+    return {
+      top: 0,
+      left: 0,
+      right: width,
+      bottom: height,
+      width,
+      height,
+    };
+  }
+
+  if (element.getBoundingClientRect) {
+    return element.getBoundingClientRect();
+  }
+
+  return {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: 0,
+    height: 0,
+  };
+};