diff --git a/packages/vant-use/.vuepress/config.js b/packages/vant-use/.vuepress/config.js index cd3275806..88ad511ad 100644 --- a/packages/vant-use/.vuepress/config.js +++ b/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/', diff --git a/packages/vant-use/src/index.ts b/packages/vant-use/src/index.ts index 6de39887b..2a19802ea 100644 --- a/packages/vant-use/src/index.ts +++ b/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'; diff --git a/packages/vant-use/src/useRect/README.md b/packages/vant-use/src/useRect/README.md new file mode 100644 index 000000000..58e3ced44 --- /dev/null +++ b/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 +
+``` + +```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): DOMRect; +``` + +### 返回值 + +| 参数 | 说明 | 类型 | +| ------ | -------------------------- | -------- | +| width | 宽度 | _number_ | +| height | 高度 | _number_ | +| top | 顶部与视图窗口左上角的距离 | _number_ | +| left | 左侧与视图窗口左上角的距离 | _number_ | +| right | 右侧与视图窗口左上角的距离 | _number_ | +| bottom | 底部与视图窗口左上角的距离 | _number_ | diff --git a/packages/vant-use/src/useRect/index.ts b/packages/vant-use/src/useRect/index.ts new file mode 100644 index 000000000..5b0d4ab5f --- /dev/null +++ b/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 +) => { + 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, + }; +};