Popconfirm 气泡确认框

点击元素，弹出气泡式的确认框。

前置条件

该组件依赖于Popover组件，需要先下载 Popover 文件至src/components/tools文件夹中。

下载Button组件文件,并将文件放入src/components/tools文件夹下。

在src/components/tools/index.ts写入以下代码

export * from './Popconfirm';

基础用法

import { Button } from 'ono-react-element'
import { Popconfirm } from '@/components/tools'

function App() {
  return
    <Popconfirm title={'这是一段内容'}>
      <Button>Click</Button>
    </Popconfirm>
}

export default App;

默认打开

import { Button } from 'ono-react-element'
import { Popconfirm } from '@/components/tools'

function App() {
  return
    <Popconfirm title={'这是一段内容'} defaultOpen>
      <Button>Click</Button>
    </Popconfirm>
}

export default App;

隐藏箭头

import { Button } from 'ono-react-element'
import { Popconfirm } from '@/components/tools'

function App() {
  return
    <Popconfirm title={'这是一段内容'} isShowArrow={false}>
      <Button>Click</Button>
    </Popconfirm>
}

export default App;

API

通用属性参考：通用属性

参数	说明	类型	默认值	是否必填
width	气泡宽度	number|string	300	否
children	需要触发气泡确认框的元素	ReactNode	-	是
color	气泡背景色	string	'#fff'	否
borderRadius	圆角大小	number|string	'5px'	否
title	气泡标题	ReactNode|() => ReactNode	-	是
content	气泡内容	ReactNode|() => ReactNode	-	否
padding	气泡内边距	number|string	16	否
gap	气泡内元素间距	number|string	12	否
okText	确认按钮文字	string	'确定'	否
cancelText	取消按钮文字	string	'取消'	否
onConfirm	点击确认按钮的回调函数	() => void	() => {}	否
onCancel	点击取消按钮的回调函数	() => void	() => {}	否
zIndex	层级	number	9999	否
defaultOpen	是否默认显示	boolean	false	否
overlayClassName	浮层类名	string	-	否
overlayStyle	浮层样式	CSSProperties	-	否
open	控制浮层显示状态	boolean	false	否
onOpenChange	浮层显示状态改变回调函数	(open: boolean) => void	() => {}	否
btnBarDom	自定义按钮组	({ OkBtn, CancelBtn, handleClose }: { OkBtn: FC; CancelBtn: FC; handleClose: () => void}) => ReactNode	({ OkBtn, CancelBtn }: { OkBtn: FC<{}>; CancelBtn: FC<{}> }) =><><CancelBtn /><OkBtn /></>	否
isShowArrow	是否显示箭头	boolean	true	否
position	气泡位置	positionParams	'top'	否

positionParams

类型	说明
'top'	上方
'bottom'	下方
'left'	左侧
'right'	右侧
'topLeft'	上左方
'topRight'	上右方
'bottomLeft'	下左方
'bottomRight'	下右方
'leftTop'	左上角
'leftBottom'	左下角
'rightTop'	右上角
'rightBottom'	右下角