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 | - | - |