Popconfirm

Demos

How to import

<script setup lang="ts">
    import { Popconfirm } from '@fibrous/semi-ui-vue';
</script>

Basic Usage

Popconfirm is based on the Tooltip component. Children support the same type as Tooltip. For details, please refer to Tooltip Cautions

<script setup lang="ts">
    import { Button, Popconfirm, Toast } from '@fibrous/semi-ui-vue';

    const onConfirm = () => {
        Toast.success('确认保存！');
    };

    const onCancel = () => {
        Toast.warning('取消保存！');
    };
</script>

<template>
    <Popconfirm @cancel="onCancel" @confirm="onConfirm">
        <Button>保存</Button>
        <template #title>确定是否要保存此修改？</template>
        <template #content>此修改将不可逆</template>
    </Popconfirm>
</template>

Type collocation

Developers can use scenario-based okType/cancelType and the #icon slot to match different styles of bubble confirmation boxes. Without an #icon slot the default warning icon is shown; an empty #icon slot renders no icon.

<script setup lang="ts">
    import { ref } from 'vue';
    import { IconAlertTriangle } from '@fibrous/semi-icons-vue';
    import { Button, Popconfirm, Radio, RadioGroup, type RadioValue } from '@fibrous/semi-ui-vue';

    type TypeKey = 'default' | 'warning' | 'danger' | 'tertiary';

    const typeMap: Record<TypeKey, { okType?: 'danger'; color?: string }> = {
        default: {},
        warning: { color: 'var(--semi-color-warning)' },
        danger: { okType: 'danger', color: 'var(--semi-color-danger)' },
        tertiary: { color: 'var(--semi-color-tertiary)' },
    };
    const keys = Object.keys(typeMap) as TypeKey[];
    const type = ref<TypeKey>('default');
    const visible = ref(true);

    const changeType = (value: RadioValue | undefined) => {
        const key = keys.find((item) => item === value);
        if (key) type.value = key;
    };
</script>

<template>
    <div>
        <RadioGroup :modelValue="type" :style="{ marginTop: '14px', marginBottom: '14px' }" type="button" @update:modelValue="changeType">
            <Radio v-for="key in keys" :key="key" :value="key">
                <span :style="{ color: `var(--semi-color-${key === 'default' ? 'primary' : key})` }">{{ key }}</span>
            </Radio>
        </RadioGroup>
        <div>
            <Popconfirm v-model:visible="visible" :okType="typeMap[type].okType" trigger="custom">
                <Button @click="visible = !visible">点击此处</Button>
                <template #icon>
                    <IconAlertTriangle size="extra-large" :style="{ color: typeMap[type].color }" />
                </template>
                <template #title>确定是否要保存此修改？</template>
                <template #content>此修改将不可逆</template>
            </Popconfirm>
        </div>
    </div>
</template>

Delay hide

onConfirm and onCancel can be closed after click through return Promise.
When onCancel and onConfirm are triggered, the corresponding Button will automatically switch to loading: true
promise solve will close the bubble confirmation box, the bubble will remain when promise reject, and button loading will automatically switch to false

<script setup lang="ts">
    import { Button, Popconfirm } from '@fibrous/semi-ui-vue';

    const onConfirm = () =>
        new Promise<void>((resolve) => {
            setTimeout(() => {
                console.log('resolve,close popconfirm');
                resolve();
            }, 2000);
        });

    const onCancel = () =>
        new Promise<void>((_resolve, reject) => {
            setTimeout(() => {
                console.log('reject, popconfirm still exist');
                reject();
            }, 2000);
        });
</script>

<template>
    <Popconfirm @cancel="onCancel" @confirm="onConfirm">
        <Button>保存</Button>
        <template #title>确定是否要保存此修改？</template>
        <template #content>此修改将不可逆</template>
    </Popconfirm>
</template>

Initialize the Focus Position of Popup Layer

okButtonProps and cancelButtonProps support passing in the autoFocus parameter, which will automatically focus at this position when the panel is opened.

The #content slot receives { initialFocusRef } as its scope. Bind it to the focusable DOM or component with :ref, and it will automatically focus at this position when the panel is opened. When a button autoFocus and initialFocusRef are both given, the button wins.

<script setup lang="ts">
    import { Button, Popconfirm, Space } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Space>
        <Popconfirm :okButtonProps="{ autoFocus: true, type: 'danger' }">
            <Button>确认聚焦</Button>
            <template #title>确定是否要保存此修改？</template>
            <template #content>此修改将不可逆</template>
        </Popconfirm>
        <Popconfirm :cancelButtonProps="{ autoFocus: true }">
            <Button>取消聚焦</Button>
            <template #title>确定是否要保存此修改？</template>
            <template #content>此修改将不可逆</template>
        </Popconfirm>
        <Popconfirm>
            <Button>内容聚焦</Button>
            <template #title>确定是否要保存此修改？</template>
            <template #content="{ initialFocusRef }">
                <input :ref="initialFocusRef" placeholder="focus here" />
            </template>
        </Popconfirm>
    </Space>
</template>

Use with Tooltip or Popover

Please refer to Use with Tooltip/Popover

API Reference

Props

Events

Slots

Exposes

class and style land on the confirmation card, and the class and style in okButtonProps and cancelButtonProps land on the buttons; other undeclared attributes are discarded. aria-label, aria-labelledby and aria-describedby are declared props and land on the role="dialog" element. When the subtree is cached by <KeepAlive> (deactivated), the popup is treated as closed and update:visible and visibleChange are emitted with false; a popup whose visible is one-way bound to true is hidden with the cached subtree and shows again once reactivated.

When visible is controlled, clicking or hovering the trigger emits update:visible and visibleChange for the caller to write back with v-model:visible; changes the parent makes to visible itself emit neither, and returnFocusOnClose works as usual. With a one-way :visible and no write-back, confirming or cancelling does not return focus to the trigger at once; focus goes back when the card has really closed.

Accessibility

ARIA

• Whatever the trigger, hover and focus included, the Popconfirm popup has role dialog, named by title (by content when there is no title); the role prop overrides it
• For the rest, please refer to Popover

Keyboard and focus

• Popconfirm must have trigger, trigger can be focused, use Enter key to open Popconfirm
• After Popconfirm is activated, press the arrow key ⬇️ to move the focus to Popconfirm. The initial focus of Popconfirm should follow several principles:
  • If the Popconfirm contains the last step of an irreversible process, such as: deleting data, etc., then this initial focus is preferably on the least destructive interactable element, such as: the cancel button (by passing the autoFocus to the object cancelButtonProps)
  • If you only read text in Popconfirm, it is recommended to set the initial focus on the most likely interactive elements, such as: confirm button (implemented by passing autoFocus to the object okButtonProps )
• Keyboard users can dismiss Popconfirm by pressing Esc and focus should return to the trigger. After the user closes the Pop through the interactive element within the Popconfirm, the focus should also return to the trigger (except when trigger is custom)
• When it is opened, after the user clicks Esc in the blank space in Popconfirm, the focus will also return to the trigger (except when trigger is custom)

Design Tokens

FAQ

• Why does the Popconfirm floating layer lose its width and wrap unexpectedly when the width is not enough near the screen border?

  After Chromium 104, the wrapping rendering strategy when the width of the screen border text is not enough has changed. For details, see issue #1022, the semi-side has been This problem was fixed in v2.17.0.