diff --git a/src/popover/README.md b/src/popover/README.md
index 27ea687f2..284dda82b 100644
--- a/src/popover/README.md
+++ b/src/popover/README.md
@@ -67,6 +67,29 @@ export default {
};
```
+### Placement
+
+```html
+
+```
+
+`placement` supports the following values:
+
+```bash
+top # Top middle
+top-start # Top left
+top-end # Top right
+left # Left middle
+left-start # Left top
+left-end # Left bottom
+right # Right middle
+right-start # Right top
+right-end # Right bottom
+bottom # Bottom middle
+bottom-start # Bottom left
+bottom-end # Bottom right
+```
+
### Show Icon
```html
@@ -123,29 +146,6 @@ export default {
};
```
-### Placement
-
-```html
-
-```
-
-`placement` supports the following values:
-
-```bash
-top # Top middle
-top-start # Top left
-top-end # Top right
-left # Left middle
-left-start # Left top
-left-end # Left bottom
-right # Right middle
-right-start # Right top
-right-end # Right bottom
-bottom # Bottom middle
-bottom-start # Bottom left
-bottom-end # Bottom right
-```
-
## API
### Props
@@ -184,4 +184,5 @@ bottom-end # Bottom right
| Name | Description |
| --------- | ----------------- |
+| default | Custom content |
| reference | Reference Element |
diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md
index 8916ac483..6b92d0d4a 100644
--- a/src/popover/README.zh-CN.md
+++ b/src/popover/README.zh-CN.md
@@ -66,6 +66,31 @@ export default {
};
```
+### 弹出位置
+
+通过 `placement` 属性来控制气泡的弹出位置。
+
+```html
+
+```
+
+`placement` 支持以下值：
+
+```bash
+top # 顶部中间位置
+top-start # 顶部左侧位置
+top-end # 顶部右侧位置
+left # 左侧中间位置
+left-start # 左侧上方位置
+left-end # 左侧下方位置
+right # 右侧中间位置
+right-start # 右侧上方位置
+right-end # 右侧下方位置
+bottom # 底部中间位置
+bottom-start # 底部左侧位置
+bottom-end # 底部右侧位置
+```
+
### 展示图标
在 `actions` 数组中，可以通过 `icon` 字段来定义选项的图标，支持传入[图标名称](#/zh-CN/icon)或图片链接。
@@ -124,29 +149,43 @@ export default {
};
```
-### 弹出位置
+### 自定义内容
-通过 `placement` 属性来控制气泡的弹出位置。
+通过默认插槽，可以在 Popover 内部放置任意内容。
```html
-
+
+
+
+
+
+
+ 自定义内容
+
+
+
```
-`placement` 支持以下值：
-
-```bash
-top # 顶部中间位置
-top-start # 顶部左侧位置
-top-end # 顶部右侧位置
-left # 左侧中间位置
-left-start # 左侧上方位置
-left-end # 左侧下方位置
-right # 右侧中间位置
-right-start # 右侧上方位置
-right-end # 右侧下方位置
-bottom # 底部中间位置
-bottom-start # 底部左侧位置
-bottom-end # 底部右侧位置
+```js
+export default {
+ data() {
+ return {
+ showPopover: false,
+ };
+ },
+};
```
## API
@@ -189,4 +228,5 @@ bottom-end # 底部右侧位置
| 名称 | 说明 |
| --------- | --------------------------- |
+| default | 自定义菜单内容 |
| reference | 触发 Popover 显示的元素内容 |
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index 69ce4f1c6..c279f6af0 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -27,6 +27,36 @@
+
+
+
+
+
+
+
+
+
-
-
-
-
+
-
-
-
-
+
+
+
+
+ {{ t('customContent') }}
+
+
+
@@ -116,6 +137,7 @@ export default {
lightTheme: '浅色风格',
showPopover: '点击弹出气泡',
actionOptions: '选项配置',
+ customContent: '自定义内容',
disableAction: '禁用选项',
choosePlacement: '选择弹出位置',
},
@@ -142,6 +164,7 @@ export default {
lightTheme: 'Light Theme',
showPopover: 'Show Popover',
actionOptions: 'Action Options',
+ customContent: 'Custom Content',
disableAction: 'Disable Action',
choosePlacement: 'Placement',
},
@@ -154,6 +177,7 @@ export default {
placement: false,
darkTheme: false,
lightTheme: false,
+ customContent: false,
disableAction: false,
},
showPicker: false,
@@ -176,13 +200,11 @@ export default {
},
methods: {
- onConfirm(value) {
- this.showPicker = false;
- this.currentPlacement = value;
-
+ onPickerChange(picker, value) {
setTimeout(() => {
this.show.placement = true;
- }, 300);
+ this.currentPlacement = value;
+ });
},
},
};
@@ -209,7 +231,7 @@ export default {
&-box {
display: flex;
justify-content: center;
- margin: 110px 0 80px;
+ margin: 110px 0;
}
}
diff --git a/src/popover/index.js b/src/popover/index.js
index d07482f1f..3b5c35f67 100644
--- a/src/popover/index.js
+++ b/src/popover/index.js
@@ -15,7 +15,7 @@ const [createComponent, bem] = createNamespace('popover');
export default createComponent({
mixins: [
ClickOutsideMixin({
- event: 'click',
+ event: 'touchstart',
method: 'onClickOutside',
}),
],
@@ -129,9 +129,9 @@ export default createComponent({
this.$emit('input', value);
},
- onClick(event) {
+ onTouchstart(event) {
event.stopPropagation();
- this.$emit('click', event);
+ this.$emit('touchstart', event);
},
onClickAction(action, index) {
@@ -180,14 +180,16 @@ export default createComponent({
lockScroll={false}
getContainer={this.getContainer}
onOpen={this.onOpen}
- onClick={this.onClick}
onClose={this.onClose}
onInput={this.onToggle}
onOpened={this.onOpened}
onClosed={this.onClosed}
+ nativeOnTouchstart={this.onTouchstart}
>
- {this.actions.map(this.renderAction)}
+
+ {this.slots('default') || this.actions.map(this.renderAction)}
+
{this.slots('reference')}
diff --git a/src/popover/index.less b/src/popover/index.less
index 59a4a1685..7c81be84d 100644
--- a/src/popover/index.less
+++ b/src/popover/index.less
@@ -4,7 +4,7 @@
.van-popover {
position: absolute;
overflow: visible;
- border-radius: @border-radius-lg;
+ background-color: transparent;
transition: opacity 0.15s, transform 0.15s;
&__wrapper {
@@ -20,6 +20,11 @@
border-width: 6px;
}
+ &__content {
+ overflow: hidden;
+ border-radius: @border-radius-lg;
+ }
+
&__action {
position: relative;
display: flex;
@@ -191,8 +196,11 @@
&--light {
color: @text-color;
- background-color: @white;
- box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
+
+ .van-popover__content {
+ background-color: @white;
+ box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
+ }
.van-popover__arrow {
color: @white;
@@ -215,7 +223,10 @@
&--dark {
color: @white;
- background-color: #4a4a4a;
+
+ .van-popover__content {
+ background-color: #4a4a4a;
+ }
.van-popover__arrow {
color: #4a4a4a;