docs(Popup): improve position document (#11443)

packages/vant/src/popup/README.md

@@ -44,10 +44,37 @@ export default {
 
 ### Position
 
-Use `position` prop to set popup display position.
+Use `position` prop to set Popup display position.
+
+The default position is `center`, it can be set to `top`, `bottom`, `left`, `right`.
+
+- When the position is `top` or `bottom`, the default width is consistent with the screen width, and the height of the Popup depends on the height of the content.
+- When the position is `left` or `right` side, the width and height are not set by default, and the width and height of the popup depend on the width and height of the content.
 
 ```html
-<van-popup v-model:show="show" position="top" :style="{ height: '30%' }" />
+<!-- top popup -->
+<van-popup v-model:show="showTop" position="top" :style="{ height: '30%' }" />
+
+<!-- bottom popup -->
+<van-popup
+  v-model:show="showBottom"
+  position="bottom"
+  :style="{ height: '30%' }"
+/>
+
+<!-- left popup -->
+<van-popup
+  v-model:show="showLeft"
+  position="left"
+  :style="{ width: '30%', height: '100%' }"
+/>
+
+<!-- Popup on the right -->
+<van-popup
+  v-model:show="showRight"
+  position="right"
+  :style="{ width: '30%', height: '100%' }"
+/>
 ```
 
 ### Close Icon

packages/vant/src/popup/README.zh-CN.md

@@ -46,10 +46,35 @@ export default {
 
 ### 弹出位置
 
-通过 `position` 属性设置弹出位置，默认居中弹出，可以设置为 `top`、`bottom`、`left`、`right`。
+通过 `position` 属性设置弹窗的弹出位置，默认为居中弹出，可以设置为 `top`、`bottom`、`left`、`right`。
+
+- 当弹窗从顶部或底部弹出时，默认宽度与屏幕宽度保持一致，弹窗高度取决于内容的高度。
+- 当弹窗从左侧或右侧弹出时，默认不设置宽度和高度，弹窗的宽高取决于内容的宽高。
 
 ```html
-<van-popup v-model:show="show" position="top" :style="{ height: '30%' }" />
+<!-- 顶部弹出 -->
+<van-popup v-model:show="showTop" position="top" :style="{ height: '30%' }" />
+
+<!-- 底部弹出 -->
+<van-popup
+  v-model:show="showBottom"
+  position="bottom"
+  :style="{ height: '30%' }"
+/>
+
+<!-- 左侧弹出 -->
+<van-popup
+  v-model:show="showLeft"
+  position="left"
+  :style="{ width: '30%', height: '100%' }"
+/>
+
+<!-- 右侧弹出 -->
+<van-popup
+  v-model:show="showRight"
+  position="right"
+  :style="{ width: '30%', height: '100%' }"
+/>
 ```
 
 ### 关闭图标

packages/vant/src/popup/demo/index.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import VanCell from '../../cell';
 import VanPopup from '..';
+import VanGrid from '../../grid';
+import VanGridItem from '../../grid-item';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site';
 
@@ -54,10 +56,28 @@ const showCustomIconPosition = ref(false);
   </demo-block>
 
   <demo-block card :title="t('position')">
-    <van-cell :title="t('buttonTop')" is-link @click="showTop = true" />
+    <van-grid clickable>
-    <van-cell :title="t('buttonBottom')" is-link @click="showBottom = true" />
+      <van-grid-item
-    <van-cell :title="t('buttonLeft')" is-link @click="showLeft = true" />
+        icon="arrow-up"
-    <van-cell :title="t('buttonRight')" is-link @click="showRight = true" />
+        :text="t('buttonTop')"
+        @click="showTop = true"
+      />
+      <van-grid-item
+        icon="arrow-down"
+        :text="t('buttonBottom')"
+        @click="showBottom = true"
+      />
+      <van-grid-item
+        icon="arrow-left"
+        :text="t('buttonLeft')"
+        @click="showLeft = true"
+      />
+      <van-grid-item
+        icon="arrow"
+        :text="t('buttonRight')"
+        @click="showRight = true"
+      />
+    </van-grid>
 
     <van-popup
       v-model:show="showTop"

packages/vant/src/popup/test/__snapshots__/demo.spec.ts.snap

@@ -30,53 +30,63 @@ exports[`should render demo and match snapshot 1`] = `
   </transition-stub>
 </div>
 <div>
-  <div class="van-cell van-cell--clickable"
+  <div class="van-grid van-hairline--top">
-       role="button"
+    <div class="van-grid-item"
+         style="flex-basis: 25%;"
+    >
+      <div role="button"
+           class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"
            tabindex="0"
       >
-    <div class="van-cell__title">
+        <i class="van-badge__wrapper van-icon van-icon-arrow-up van-grid-item__icon">
-      <span>
+        </i>
+        <span class="van-grid-item__text">
           From Top
         </span>
       </div>
-    <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
-    </i>
     </div>
-  <div class="van-cell van-cell--clickable"
+    <div class="van-grid-item"
-       role="button"
+         style="flex-basis: 25%;"
+    >
+      <div role="button"
+           class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"
            tabindex="0"
       >
-    <div class="van-cell__title">
+        <i class="van-badge__wrapper van-icon van-icon-arrow-down van-grid-item__icon">
-      <span>
+        </i>
+        <span class="van-grid-item__text">
           From Bottom
         </span>
       </div>
-    <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
-    </i>
     </div>
-  <div class="van-cell van-cell--clickable"
+    <div class="van-grid-item"
-       role="button"
+         style="flex-basis: 25%;"
+    >
+      <div role="button"
+           class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"
            tabindex="0"
       >
-    <div class="van-cell__title">
+        <i class="van-badge__wrapper van-icon van-icon-arrow-left van-grid-item__icon">
-      <span>
+        </i>
+        <span class="van-grid-item__text">
           From Left
         </span>
       </div>
-    <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
-    </i>
     </div>
-  <div class="van-cell van-cell--clickable"
+    <div class="van-grid-item"
-       role="button"
+         style="flex-basis: 25%;"
+    >
+      <div role="button"
+           class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"
            tabindex="0"
       >
-    <div class="van-cell__title">
+        <i class="van-badge__wrapper van-icon van-icon-arrow van-grid-item__icon">
-      <span>
+        </i>
+        <span class="van-grid-item__text">
           From Right
         </span>
       </div>
-    <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+    </div>
-    </i>
   </div>
   <transition-stub name="van-fade"
                    appear="true"