docs(Popover): add zh-CN document

src/popover/README.zh-CN.md

@@ -2,6 +2,8 @@
 
 ### 介绍
 
+弹出式的气泡菜单。
+
 ### 引入
 
 ```js
@@ -15,8 +17,136 @@ Vue.use(Popover);
 
 ### 基础用法
 
-```html
+当 Popover 弹出时，会基于 `reference` 插槽的内容进行定位。
 
+```html
+<van-popover v-model="showPopover" :actions="actions">
+  <template #reference>
+    <van-button type="primary" @click="showPopover = true">
+      浅色风格
+    </van-button>
+  </template>
+</van-popover>
+```
+
+```js
+export default {
+  data() {
+    return {
+      showPopover: false,
+      // 通过 actions 属性来定义菜单选项
+      actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
+    };
+  },
+};
+```
+
+### 深色风格
+
+Popover 支持浅色和深色两种风格，默认为浅色风格，将 `theme` 属性设置为 `dark` 可切换为深色风格。
+
+```html
+<van-popover v-model="showPopover" theme="dark" :actions="actions">
+  <template #reference>
+    <van-button type="primary" @click="showPopover = true">
+      深色风格
+    </van-button>
+  </template>
+</van-popover>
+```
+
+```js
+export default {
+  data() {
+    return {
+      showPopover: false,
+      actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
+    };
+  },
+};
+```
+
+### 展示图标
+
+在 `actions` 数组中，可以通过 `icon` 字段来定义选项的图标，支持传入[图标名称](#/zh-CN/icon)或图片链接。
+
+```html
+<van-popover v-model="showPopover" :actions="actions">
+  <template #reference>
+    <van-button type="primary" @click="showPopover = true">
+      展示图标
+    </van-button>
+  </template>
+</van-popover>
+```
+
+```js
+export default {
+  data() {
+    return {
+      showPopover: false,
+      actions: [
+        { text: '选项一', icon: 'add-o' },
+        { text: '选项二', icon: 'music-o' },
+        { text: '选项三', icon: 'more-o' },
+      ],
+    };
+  },
+};
+```
+
+### 禁用选项
+
+在 `actions` 数组中，可以通过 `disabled` 字段来禁用某个选项。
+
+```html
+<van-popover v-model="showPopover" :actions="actions">
+  <template #reference>
+    <van-button type="primary" @click="showPopover = true">
+      禁用选项
+    </van-button>
+  </template>
+</van-popover>
+```
+
+```js
+export default {
+  data() {
+    return {
+      showPopover: false,
+      actions: [
+        { text: '选项一', disabled: true },
+        { text: '选项二', disabled: true },
+        { text: '选项三' },
+      ],
+    };
+  },
+};
+```
+
+### 弹出位置
+
+通过 `placement` 属性来控制气泡的弹出位置。
+
+```html
+<van-popover placement="top" />
+```
+
+`placement` 支持以下值：
+
+```bash
+top           # 顶部中间位置
+top-start     # 顶部左侧位置
+top-end       # 顶部右侧位置
+left          # 左侧中间位置
+left-start    # 左侧上方位置
+left-end      # 左侧下方位置
+right         # 右侧中间位置
+right-start   # 右侧上方位置
+right-end     # 右侧下方位置
+bottom        # 底部中间位置
+bottom-start  # 底部左侧位置
+bottom-end    # 底部右侧位置
 ```
 
 ## API
@@ -27,12 +157,12 @@ Vue.use(Popover);
 | --- | --- | --- | --- |
 | v-model | 是否展示气泡弹出层 | _boolean_ | `false` |
 | actions | 选项列表 | _Action[]_ | `[]` |
-| placement | 弹出位置 | _string_ | - |
+| placement | 弹出位置 | _string_ | `bottom` |
 | theme | 主题风格，可选值为 `dark` | _string_ | `light` |
 | overlay | 是否显示遮罩层 | _boolean_ | `false` |
 | close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` |
 | close-on-click-outside | 是否在点击外部元素后关闭菜单 | _boolean_ | `true` |
-| get-container `v2.4.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | `body` |
+| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | `body` |
 
 ### Action 数据结构
 

src/popover/demo/index.vue

@@ -17,7 +17,6 @@
         v-model="show.darkTheme"
         theme="dark"
         :actions="t('actions')"
-        placement="bottom"
         style="margin-left: 16px;"
       >
         <template #reference>
@@ -28,6 +27,33 @@
       </van-popover>
     </demo-block>
 
+    <demo-block :title="t('actionOptions')">
+      <van-popover
+        v-model="show.showIcon"
+        :actions="t('actionsWithIcon')"
+        placement="bottom-start"
+        style="margin-left: 16px;"
+      >
+        <template #reference>
+          <van-button type="primary" @click="show.showIcon = true">
+            {{ t('showIcon') }}
+          </van-button>
+        </template>
+      </van-popover>
+
+      <van-popover
+        v-model="show.disableAction"
+        :actions="t('actionsDisabled')"
+        style="margin-left: 16px;"
+      >
+        <template #reference>
+          <van-button type="primary" @click="show.disableAction = true">
+            {{ t('disableAction') }}
+          </van-button>
+        </template>
+      </van-popover>
+    </demo-block>
+
     <demo-block :title="t('placement')">
       <van-field
         is-link
@@ -65,34 +91,6 @@
         </van-popover>
       </div>
     </demo-block>
-
-    <demo-block :title="t('actionOptions')">
-      <van-popover
-        v-model="show.showIcon"
-        :actions="t('actionsWithIcon')"
-        placement="top-start"
-        style="margin-left: 16px;"
-      >
-        <template #reference>
-          <van-button type="primary" @click="show.showIcon = true">
-            {{ t('showIcon') }}
-          </van-button>
-        </template>
-      </van-popover>
-
-      <van-popover
-        v-model="show.disabled"
-        :actions="t('actionsDisabled')"
-        placement="top"
-        style="margin-left: 16px;"
-      >
-        <template #reference>
-          <van-button type="primary" @click="show.disabled = true">
-            {{ t('disabled') }}
-          </van-button>
-        </template>
-      </van-popover>
-    </demo-block>
   </demo-section>
 </template>
 
@@ -118,6 +116,7 @@ export default {
       lightTheme: '浅色风格',
       showPopover: '点击弹出气泡',
       actionOptions: '选项配置',
+      disableAction: '禁用选项',
       choosePlacement: '选择弹出位置',
     },
     'en-US': {
@@ -143,6 +142,7 @@ export default {
       lightTheme: 'Light Theme',
       showPopover: 'Show Popover',
       actionOptions: 'Action Options',
+      disableAction: 'Disable Action',
       choosePlacement: 'Choose Placement',
     },
   },
@@ -150,11 +150,11 @@ export default {
   data() {
     return {
       show: {
-        disabled: false,
         showIcon: false,
         placement: false,
         darkTheme: false,
         lightTheme: false,
+        disableAction: false,
       },
       showPicker: false,
       currentPlacement: '',
@@ -192,8 +192,6 @@ export default {
 @import '../../style/var';
 
 .demo-popover {
-  min-height: 200vh;
-
   &-refer {
     width: 60px;
     height: 60px;

src/popover/index.js

@@ -23,7 +23,6 @@ export default createComponent({
   props: {
     value: Boolean,
     overlay: Boolean,
-    placement: String,
     textColor: String,
     backgroundColor: String,
     offset: {
@@ -38,6 +37,10 @@ export default createComponent({
       type: Array,
       default: () => [],
     },
+    placement: {
+      type: String,
+      default: 'bottom',
+    },
     getContainer: {
       type: [String, Function],
       default: 'body',