chore: use useWindowSize in convertVw (#9854)

README.md

@@ -41,13 +41,19 @@
 
 ## Install
 
+Using `npm` to install:
+
 ```bash
 # install Vant 2 for Vue 2 project
 npm i vant@2
 
 # install Vant 3 for Vue 3 project
 npm i vant@3
+```
 
+Using `yarn` or `pnpm`:
+
+```bash
 # with yarn
 yarn add vant@3
 

README.zh-CN.md

@@ -45,13 +45,19 @@ Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源
 
 ## 安装
 
+在现有项目中使用 Vant 时，可以通过 `npm` 进行安装：
+
 ```bash
 # Vue 2 项目，安装 Vant 2
 npm i vant@2
 
 # Vue 3 项目，安装 Vant 3
 npm i vant@3
+```
 
+当然，你也可以通过 `yarn` 或 `pnpm` 进行安装：
+
+```bash
 # 通过 yarn 安装
 yarn add vant@3
 

packages/vant/docs/markdown/quickstart.en-US.md

@@ -4,13 +4,19 @@
 
 ### npm
 
+Using `npm` to install:
+
 ```bash
 # install Vant 2 for Vue 2 project
 npm i vant@2
 
 # install Vant 3 for Vue 3 project
 npm i vant@3
+```
 
+Using `yarn` or `pnpm`:
+
+```bash
 # with yarn
 yarn add vant@3
 

packages/vant/docs/markdown/quickstart.zh-CN.md

@@ -8,7 +8,7 @@
 
 ### 通过 npm 安装
 
-在现有项目中使用 Vant 时，可以通过 `npm`、`yarn` 或 `pnpm` 进行安装：
+在现有项目中使用 Vant 时，可以通过 `npm` 进行安装：
 
 ```bash
 # Vue 2 项目，安装 Vant 2
@@ -16,7 +16,11 @@ npm i vant@2
 
 # Vue 3 项目，安装 Vant 3
 npm i vant@3
+```
 
+当然，你也可以通过 `yarn` 或 `pnpm` 进行安装：
+
+```bash
 # 通过 yarn 安装
 yarn add vant@3
 

packages/vant/src/composables/use-route.ts

@@ -17,10 +17,12 @@ export const routeProps = {
 
 export type RouteProps = ExtractPropTypes<typeof routeProps>;
 
-export function route(vm: ComponentPublicInstance<RouteProps>) {
-  const router = vm.$router;
-  const { to, url, replace } = vm;
-
+export function route({
+  to,
+  url,
+  replace,
+  $router: router,
+}: ComponentPublicInstance<RouteProps>) {
   if (to && router) {
     router[replace ? 'replace' : 'push'](to);
   } else if (url) {

packages/vant/src/dropdown-item/types.ts

@@ -14,17 +14,13 @@ export type DropdownItemExpose = {
       immediate?: boolean;
     }
   ) => void;
-  /**
-   * @private
-   */
+  /** @private */
   state: {
     showPopup: boolean;
     transition: boolean;
     showWrapper: boolean;
   };
-  /**
-   * @private
-   */
+  /** @private */
   renderTitle: () => string | VNode[];
 };
 

packages/vant/src/image/Image.tsx

@@ -63,15 +63,10 @@ export default defineComponent({
     const { $Lazyload } = getCurrentInstance()!.proxy!;
 
     const style = computed(() => {
-      const style: CSSProperties = {};
-
-      if (isDef(props.width)) {
-        style.width = addUnit(props.width);
-      }
-
-      if (isDef(props.height)) {
-        style.height = addUnit(props.height);
-      }
+      const style: CSSProperties = {
+        width: addUnit(props.width),
+        height: addUnit(props.height),
+      };
 
       if (isDef(props.radius)) {
         style.overflow = 'hidden';

packages/vant/src/utils/format.ts

@@ -1,13 +1,13 @@
 import { CSSProperties } from 'vue';
+import { useWindowSize } from '@vant/use';
 import { inBrowser } from './basic';
 import { isDef, isNumeric } from './validate';
 
 export function addUnit(value?: string | number): string | undefined {
-  if (!isDef(value)) {
-    return undefined;
+  if (isDef(value)) {
+    return isNumeric(value) ? `${value}px` : String(value);
   }
-
-  return isNumeric(value) ? `${value}px` : String(value);
+  return undefined;
 }
 
 export function getSizeStyle(
@@ -51,13 +51,15 @@ function convertRem(value: string) {
 }
 
 function convertVw(value: string) {
+  const { width } = useWindowSize();
   value = value.replace(/vw/g, '');
-  return (+value * window.innerWidth) / 100;
+  return (+value * width.value) / 100;
 }
 
 function convertVh(value: string) {
+  const { height } = useWindowSize();
   value = value.replace(/vh/g, '');
-  return (+value * window.innerHeight) / 100;
+  return (+value * height.value) / 100;
 }
 
 export function unitToPx(value: string | number): number {