确认对话框

ConfirmDialog 是一个易于使用且可自定义的确认 API，它使用对话框。

导入#


import { ConfirmDialog } from 'primereact/confirmdialog'; // For <ConfirmDialog /> component
import { confirmDialog } from 'primereact/confirmdialog'; // For confirmDialog method
         

基本用法#

页面上需要存在一个 ConfirmDialog 组件，该组件通过接受配置对象的 confirmDialog 函数进行交互以进行自定义。


<Toast ref={toast} />
<ConfirmDialog />
<Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
<Button onClick={confirm2} icon="pi pi-times" label="Delete"></Button>
         

位置#

确认选项的 position 属性用于在屏幕的各个边缘和角落显示对话框。


<Toast ref={toast} />
<ConfirmDialog />
<div className="flex flex-wrap justify-content-center gap-2 mb-2">
    <Button label="Left" icon="pi pi-arrow-right" onClick={() => confirm('left')} className="p-button-help" style={{ minWidth: '10rem' }} />
    <Button label="Right" icon="pi pi-arrow-left" onClick={() => confirm('right')} className="p-button-help" style={{ minWidth: '10rem' }} />
</div>
<div className="flex flex-wrap justify-content-center gap-2 mb-2">
    <Button label="TopLeft" icon="pi pi-arrow-down-right" onClick={() => confirm('top-left')} className="p-button-warning" style={{ minWidth: '10rem' }} />
    <Button label="Top" icon="pi pi-arrow-down" onClick={() => confirm('top')} className="p-button-warning" style={{ minWidth: '10rem' }} />
    <Button label="TopRight" icon="pi pi-arrow-down-left" onClick={() => confirm('top-right')} className="p-button-warning" style={{ minWidth: '10rem' }} />
</div>
<div className="flex flex-wrap justify-content-center gap-2">
    <Button label="BottomLeft" icon="pi pi-arrow-up-right" onClick={() => confirm('bottom-left')} className="p-button-success" style={{ minWidth: '10rem' }} />
    <Button label="Bottom" icon="pi pi-arrow-up" onClick={() => confirm('bottom')} className="p-button-success" style={{ minWidth: '10rem' }} />
    <Button label="BottomRight" icon="pi pi-arrow-up-left" onClick={() => confirm('bottom-right')} className="p-button-success" style={{ minWidth: '10rem' }} />
</div>
         

声明式#

声明式是程序化方法的替代方法，其中 ConfirmDialog 通过绑定到 visible 和 onHide 事件回调来控制。


<Toast ref={toast} />
<ConfirmDialog group="declarative"  visible={visible} onHide={() => setVisible(false)} message="Are you sure you want to proceed?" 
    header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />
<Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
         

模板#

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


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

响应式#

ConfirmDialog 的宽度可以通过断点选项根据屏幕尺寸进行调整，其中键定义断点的最大宽度，值定义对应的宽度。当没有匹配的断点时，将使用样式属性中定义的宽度。


<Toast ref={toast} />
<ConfirmDialog
    group="declarative"
    visible={visible}
    onHide={() => setVisible(false)}
    message="Are you sure you want to proceed?"
    header="Confirmation"
    icon="pi pi-exclamation-triangle"
    accept={accept}
    reject={reject}
    style={{ width: '50vw' }}
    breakpoints={{ '1100px': '75vw', '960px': '100vw' }}
/>
<Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
         

无头模式#

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


<Toast ref={toast} />
<ConfirmDialog
    group="headless"
    content={({ headerRef, contentRef, footerRef, hide, message }) => (
        <div className="flex flex-column align-items-center p-5 surface-overlay border-round">
            <div className="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
                <i className="pi pi-question text-5xl"></i>
            </div>
            <span className="font-bold text-2xl block mb-2 mt-4" ref={headerRef}>
                {message.header}
            </span>
            <p className="mb-0" ref={contentRef}>
                {message.message}
            </p>
            <div className="flex align-items-center gap-2 mt-4" ref={footerRef}>
                <Button
                    label="Save"
                    onClick={(event) => {
                        hide(event);
                        accept();
                    }}
                    className="w-8rem"
                ></Button>
                <Button
                    label="Cancel"
                    outlined
                    onClick={(event) => {
                        hide(event);
                        reject();
                    }}
                    className="w-8rem"
                ></Button>
            </div>
        </div>
    )}
/>
<div className="card flex flex-wrap gap-2 justify-content-center">
    <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
</div>
         

可访问性#

屏幕阅读器

ConfirmDialog 组件使用 alertdialog 角色以及指向标题元素的 aria-labelledby，但是任何属性都会传递给根元素，因此您可以使用 aria-labelledby 来覆盖此默认行为。此外，由于焦点保持在弹出窗口内，因此添加了 aria-modal。

建议使用可以通过键盘访问的触发组件（例如按钮），如果不是，则需要添加 tabIndex。

当使用 confirm 函数并且将触发器作为参数传递时，ConfirmDialog 会将 aria-expanded 状态属性和 aria-controls 添加到触发器，以便定义触发器和弹出窗口之间的关系。


const confirm = (event) => {
    confirmDialog({
        trigger: event.currentTarget,
        message: 'Are you sure you want to proceed?',
        header: 'Confirmation',
        icon: 'pi pi-exclamation-triangle',
        accept: () => acceptFunc(),
        reject: () => rejectFunc()
    });
}

<Button onClick={confirm} icon="pi pi-check" label="Confirm"></Button>

<ConfirmDialog />
 

如果对话框由 visible 属性控制，则需要显式处理 aria-expanded 和 aria-controls。


<ConfirmDialog id="dlg_confirmation" visible={visible} onHide={() => setVisible(false)} message="Are you sure you want to proceed?"
header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />

<Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" aria-controls={visible ? 'dlg_confirmation' : null} aria-expanded={visible ? true : false} />
 

覆盖层键盘支持

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

按钮键盘支持

按键功能
enter触发操作，关闭弹出窗口并将焦点移动到触发器。
space触发操作，关闭弹出窗口并将焦点移动到触发器。
                  PrimeReact 10.9.1 由 PrimeTek