确认弹出框

ConfirmPopup 是一个易于使用且可定制的确认 API，它使用弹出框。

导入#


import { ConfirmPopup } from 'primereact/confirmpopup'; // To use <ConfirmPopup> tag
import { confirmPopup } from 'primereact/confirmpopup'; // To use confirmPopup method

基本用法#

页面上需要存在一个 ConfirmPopup 组件，它通过 confirmPopup 函数进行交互，该函数接受一个配置对象用于自定义。为了对齐弹出框，必须提供 target 属性，该属性引用源元素。


<Toast ref={toast} />
<ConfirmPopup />
<div className="card flex flex-wrap gap-2 justify-content-center">
    <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
    <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger"></Button>
</div>

声明式#

声明式是程序化方法的一种替代方案，其中 ConfirmDialog 通过绑定到 visible 和 onHide 事件回调以及 target 属性来控制，以引用源元素。


<Toast ref={toast} />
<ConfirmPopup target={buttonEl.current} visible={visible} onHide={() => setVisible(false)} 
    message="Are you sure you want to proceed?" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />
<Button ref={buttonEl} onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />

模板#

模板允许自定义消息内容。


<Toast ref={toast} />
<ConfirmPopup group="templating" />
<div className="card flex justify-content-center">
    <Button onClick={showTemplate} icon="pi pi-check" label="Confirm"></Button>
</div>

无头模式#

通过定义一个 content 属性启用无头模式，该属性允许您实现整个确认 UI，而不是默认元素。


<Toast ref={toast} />
<ConfirmPopup
    group="headless"
    content={({message, acceptBtnRef, rejectBtnRef, hide}) => 
        <div className="bg-gray-900 text-white border-round p-3">
            <span>{message}</span>
            <div className="flex align-items-center gap-2 mt-3">
                <Button ref={acceptBtnRef} label="Save" onClick={() => {accept(); hide();}} className="p-button-sm p-button-outlined"></Button>
                <Button ref={rejectBtnRef} label="Cancel" outlined onClick={() => {reject(); hide();}}className="p-button-sm p-button-text"></Button>
            </div>
        </div>
    }
/>
<div className="card flex flex-wrap gap-2 justify-content-center">
    <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
    <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger"></Button>
</div>

可访问性#

屏幕阅读器

ConfirmPopup 组件使用 alertdialog 角色，并且由于任何属性都会传递到根元素，您可以定义诸如 aria-label 或 aria-labelledby 之类的属性来描述弹出框的内容。此外由于焦点保持在弹出框内，因此添加了 aria-modal。

建议使用可以使用键盘访问的触发器组件，例如按钮，如果不是，则必须添加 tabIndex。ConfirmPopup 会向触发器添加 aria-expanded 状态属性和 aria-controls，以便定义触发器和弹出框之间的关系。

覆盖键盘支持

当弹出框打开时，第一个可聚焦的元素会接收焦点，这可以通过将 autofocus 添加到弹出框内的元素来定制。

按键	功能
tab	将焦点移动到弹出框内的下一个可聚焦元素。
shift + tab	将焦点移动到弹出框内的上一个可聚焦元素。
escape	关闭弹出框并将焦点移动到触发器。

按钮键盘支持

按键	功能
enter	触发操作，关闭弹出框并将焦点移动到触发器。
space	触发操作，关闭弹出框并将焦点移动到触发器。