diff --git a/components/popover/index.d.ts b/components/popover/index.d.ts
index fc88b068f..af433fe80 100644
--- a/components/popover/index.d.ts
+++ b/components/popover/index.d.ts
@@ -4,7 +4,7 @@ export interface PopoverProps {
title?: string | JSX.Element
content: string | JSX.Element
placement?: 'top' | 'right' | 'bottom' | 'left'
- trigger?: 'click' | 'focus' | 'hover'
+ trigger?: 'click' | 'focus' | 'hover' | 'contextmenu'
visible?: boolean
style?: React.CSSProperties
className?: string
diff --git a/components/popover/index.js b/components/popover/index.js
index c9afe1112..255664082 100644
--- a/components/popover/index.js
+++ b/components/popover/index.js
@@ -12,7 +12,7 @@ export default class Popover extends Component {
}
static propTypes = {
placement: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
- trigger: PropTypes.oneOf(['click', 'focus', 'hover']),
+ trigger: PropTypes.oneOf(['click', 'focus', 'hover', 'contextmenu']),
title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
content: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
width: PropTypes.string
@@ -112,6 +112,18 @@ export default class Popover extends Component {
this.delayHidePopper(e)
clearTimeout(this.delayShowPopperTimer)
})
+ } else if (trigger === 'contextmenu') {
+ referenceRef.addEventListener('contextmenu', (e) => {
+ e.preventDefault()
+ this.state.showPopper ? this.hidePopper() : this.showPopper()
+ })
+
+ document.addEventListener('click', (e) => {
+ this.eventTarget = e.target
+ if (this.isInPopover()) return
+
+ this.hidePopper()
+ })
}
}
render() {
diff --git a/docs/demo/popover/section-base.jsx b/docs/demo/popover/section-base.jsx
index 7dbbfc824..e15144179 100644
--- a/docs/demo/popover/section-base.jsx
+++ b/docs/demo/popover/section-base.jsx
@@ -32,6 +32,9 @@ class Demo extends React.Component {
+
+
+
)
}
diff --git a/docs/zh-CN/components/popover.mdx b/docs/zh-CN/components/popover.mdx
index 3e3e52c0c..80eab1ee3 100755
--- a/docs/zh-CN/components/popover.mdx
+++ b/docs/zh-CN/components/popover.mdx
@@ -27,6 +27,6 @@ import DemoMix from "../../demo/popover/section-mix.jsx";
| title | 气泡卡片标题 | string | - | - |
| content | 气泡卡片内容 | string \| ReactNode | - | - |
| placement | 气泡卡片显示的位置 | string | 'top' \| 'right' \| 'bottom' \| 'left' | 'top' |
-| trigger | 气泡卡片触发方式 | string | 'click' \| 'focus' \| 'hover' | 'click' |
+| trigger | 气泡卡片触发方式 | string | 'click' \| 'focus' \| 'hover' \| 'contextmenu' | 'click' |
| visible | 控制气泡卡片的显示和隐藏(需要组件完全受控时使用) | boolean | true \| false | - |
| overlayClassName | 下拉根元素的类名称 (3.0 新增) | string | - | - |