diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md
index 40abfde06..8916ac483 100644
--- a/src/popover/README.zh-CN.md
+++ b/src/popover/README.zh-CN.md
@@ -2,6 +2,8 @@
### 介绍
+弹出式的气泡菜单。
+
### 引入
```js
@@ -15,8 +17,136 @@ Vue.use(Popover);
### 基础用法
-```html
+当 Popover 弹出时,会基于 `reference` 插槽的内容进行定位。
+```html
+
+
+
+ 浅色风格
+
+
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ showPopover: false,
+ // 通过 actions 属性来定义菜单选项
+ actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
+ };
+ },
+};
+```
+
+### 深色风格
+
+Popover 支持浅色和深色两种风格,默认为浅色风格,将 `theme` 属性设置为 `dark` 可切换为深色风格。
+
+```html
+
+
+
+ 深色风格
+
+
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ showPopover: false,
+ actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
+ };
+ },
+};
+```
+
+### 展示图标
+
+在 `actions` 数组中,可以通过 `icon` 字段来定义选项的图标,支持传入[图标名称](#/zh-CN/icon)或图片链接。
+
+```html
+
+
+
+ 展示图标
+
+
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ showPopover: false,
+ actions: [
+ { text: '选项一', icon: 'add-o' },
+ { text: '选项二', icon: 'music-o' },
+ { text: '选项三', icon: 'more-o' },
+ ],
+ };
+ },
+};
+```
+
+### 禁用选项
+
+在 `actions` 数组中,可以通过 `disabled` 字段来禁用某个选项。
+
+```html
+
+
+
+ 禁用选项
+
+
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ showPopover: false,
+ actions: [
+ { text: '选项一', disabled: true },
+ { text: '选项二', disabled: true },
+ { text: '选项三' },
+ ],
+ };
+ },
+};
+```
+
+### 弹出位置
+
+通过 `placement` 属性来控制气泡的弹出位置。
+
+```html
+
+```
+
+`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 数据结构
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index a5710dbbf..0d52daa8d 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -17,7 +17,6 @@
v-model="show.darkTheme"
theme="dark"
:actions="t('actions')"
- placement="bottom"
style="margin-left: 16px;"
>
@@ -28,6 +27,33 @@
+
+
+
+
+ {{ t('showIcon') }}
+
+
+
+
+
+
+
+ {{ t('disableAction') }}
+
+
+
+
+
-
-
-
-
-
- {{ t('showIcon') }}
-
-
-
-
-
-
-
- {{ t('disabled') }}
-
-
-
-
@@ -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;
diff --git a/src/popover/index.js b/src/popover/index.js
index facc4eb6c..d07482f1f 100644
--- a/src/popover/index.js
+++ b/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',