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