diff --git a/packages/vant-use/.vuepress/config.js b/packages/vant-use/.vuepress/config.js index 687d3697c..e01abac89 100644 --- a/packages/vant-use/.vuepress/config.js +++ b/packages/vant-use/.vuepress/config.js @@ -30,7 +30,7 @@ module.exports = { '/src/useEventListener/', '/src/usePageVisibility/', '/src/useScrollParent/', - // '/src/useWindowSize/', + '/src/useWindowSize/', ], }, ], diff --git a/packages/vant-use/src/useWindowSize/README.md b/packages/vant-use/src/useWindowSize/README.md new file mode 100644 index 000000000..ac90fd72d --- /dev/null +++ b/packages/vant-use/src/useWindowSize/README.md @@ -0,0 +1,43 @@ +# useWindowSize + +获取浏览器窗口的视口宽度和高度,并在窗口大小变化时自动更新。 + +## 代码演示 + +### 基本用法 + +```js +import { watch } from 'vue'; +import { useWindowSize } from '@vant/use'; + +export default { + setup() { + const { width, height } = useWindowSize(); + + console.log(width.value); // -> 窗口宽度 + console.log(height.value); // -> 窗口高度 + + watch([width, height], () => { + console.log('window resized'); + }); + }, +}; +``` + +## API + +### 类型定义 + +```ts +function useWindowSize(): { + width: Ref; + height: Ref; +}; +``` + +### 返回值 + +| 参数 | 说明 | 类型 | +| ------ | -------------- | -------------- | +| width | 浏览器窗口宽度 | _Ref\_ | +| height | 浏览器窗口高度 | _Ref\_ | diff --git a/packages/vant-use/src/useWindowSize/index.ts b/packages/vant-use/src/useWindowSize/index.ts index ddaefce73..d5faa7d00 100644 --- a/packages/vant-use/src/useWindowSize/index.ts +++ b/packages/vant-use/src/useWindowSize/index.ts @@ -2,9 +2,9 @@ import { ref } from 'vue'; import { inBrowser } from '../shared'; import { useEventListener } from '../useEventListener'; -export function useWindowSize(initialWidth = 0, initialHeight = 0) { - const width = ref(inBrowser ? window.innerWidth : initialWidth); - const height = ref(inBrowser ? window.innerHeight : initialHeight); +export function useWindowSize() { + const width = ref(inBrowser ? window.innerWidth : 0); + const height = ref(inBrowser ? window.innerHeight : 0); const onResize = () => { width.value = window.innerWidth;