Ant Design Vue Popconfirm 实现回车确认（Enter 确认）

一、Popconfirm

操作的简单而紧凑的确认对话框。

要实现 Enter 确认, 查看官方 API 无法满足。

二、解决方式

1. 可以在组件外部监听 Enter 事件实现（该方法会和组件本身的 blur事件冲突）。
2. 为解决 Enter 和 组件 blur 事件冲突，采用 slot 的方式，自定义确认和取消按钮。
3. 确认按钮 click 事件同时触发时机比 popconfirm 组件 blur 时机晚，因此修改为 mousedown 事件。

三、popconfirm 自定义确认、取消

<span 
    @keydown.enter="handleEnter"
>
    <a-popconfirm
        class="editable-cell-icon"
        :title="t('data.del_confirm')"
        :ok-text="t('data.ok')"
        :cancel-text="t('data.cancel')"
        :open="popconfirmOpen"
        @confirm="delCard"
    >
        <a-button 
            type="text" 
            size="small" 
            ref="delBtnRef"
            @click="tooglePopconfirm"
        >
            <template #icon>
                <delete-outlined />
            </template>
        </a-button>
        <template #okButton>
            <a-button 
                type="primary"
                size="small" 
                @mousedown="delCard"
            > {{ t('data.ok') }}
            </a-button>
        </template>
        <template #cancelButton>
            <a-button 
                size="small" 
                @click="tooglePopconfirm"
            > {{ t('data.cancel') }}
            </a-button>
        </template>
    </a-popconfirm>
</span>

四、变量和函数

const delBtnRef = ref();
const popconfirmOpen = ref(false);

// Ok
const delCard = () => {
    // ....
    popconfirmOpen.value = false;
};

// Cancel
const tooglePopconfirm = () => {
    popconfirmOpen.value = !popconfirmOpen.value;
};

// Enter 事件
const handleEnter = (e: any) => {
    delBtnRef.value.blur();
    // ...
};