开发预览更新于 2026-05-10

ConfirmDialog 确认弹窗

Modal 派生件，针对"二次确认"语义；支持 default / danger 两种语气。

基础用法

自带图标 + 标题 + 描述 + 取消/确认按钮。tone="danger" 用红色配色，强调不可逆操作。默认 closeOnOverlay=false（破坏性操作必须明确点击按钮）。

背景

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfConfirmDialog, CfButton } from '@chufix-design/vue';
const open = ref(false);
const dangerOpen = ref(false);
</script>
<template>
  <div class="demo-row">
    <CfButton @click="open = true">提示确认</CfButton>
    <CfButton variant="danger" @click="dangerOpen = true">危险确认</CfButton>
    <CfConfirmDialog
      v-model:open="open"
      title="确认操作"
      description="这个操作可以稍后撤销。"
      @confirm="open = false"
    />
    <CfConfirmDialog
      v-model:open="dangerOpen"
      tone="danger"
      title="永久删除？"
      description="此操作不可逆，相关数据会立即销毁。"
      confirm-text="永久删除"
      @confirm="dangerOpen = false"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfConfirmDialog, CfButton } from '@chufix-design/vue';
const open = ref(false);
const dangerOpen = ref(false);
</script>
<template>
  <div class="demo-row">
    <CfButton @click="open = true">提示确认</CfButton>
    <CfButton variant="danger" @click="dangerOpen = true">危险确认</CfButton>
    <CfConfirmDialog
      v-model:open="open"
      title="确认操作"
      description="这个操作可以稍后撤销。"
      @confirm="open = false"
    />
    <CfConfirmDialog
      v-model:open="dangerOpen"
      tone="danger"
      title="永久删除？"
      description="此操作不可逆，相关数据会立即销毁。"
      confirm-text="永久删除"
      @confirm="dangerOpen = false"
    />
  </div>
</template>

import { useState } from 'react';
import { CfConfirmDialog } from '@chufix-design/react';

export default function Demo() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <CfConfirmDialog
      open={open}
      onOpenChange={setOpen}
      tone="danger"
      title="永久删除？"
      description="此操作不可逆。"
      confirmText="永久删除"
      onConfirm={onConfirm}
      />
    </>
  );
}

Loading 异步确认

把 confirm 钩到一个 1.5s 的异步操作，期间 confirm button 显示 spinner，cancel 被禁用。

背景

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfConfirmDialog, CfButton } from '@chufix-design/vue';
const open = ref(false);
const loading = ref(false);
async function onConfirm() {
  loading.value = true;
  await new Promise((r) => setTimeout(r, 1500));
  loading.value = false;
  open.value = false;
}
</script>
<template>
  <div class="demo-row">
    <CfButton variant="danger" @click="open = true">删除并等待 1.5s</CfButton>
    <CfConfirmDialog
      v-model:open="open"
      tone="danger"
      title="删除项目？"
      description="模拟一个 1.5s 的异步删除操作，期间确认按钮显示 spinner、取消按钮被禁用。"
      :loading="loading"
      confirm-text="永久删除"
      @confirm="onConfirm"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfConfirmDialog, CfButton } from '@chufix-design/vue';
const open = ref(false);
const loading = ref(false);
async function onConfirm() {
  loading.value = true;
  await new Promise((r) => setTimeout(r, 1500));
  loading.value = false;
  open.value = false;
}
</script>
<template>
  <div class="demo-row">
    <CfButton variant="danger" @click="open = true">删除并等待 1.5s</CfButton>
    <CfConfirmDialog
      v-model:open="open"
      tone="danger"
      title="删除项目？"
      description="模拟一个 1.5s 的异步删除操作，期间确认按钮显示 spinner、取消按钮被禁用。"
      :loading="loading"
      confirm-text="永久删除"
      @confirm="onConfirm"
    />
  </div>
</template>

import { CfConfirmDialog } from '@chufix-design/react';

export default function Demo() {
  const loading = false;
  return (
    <>
      <CfConfirmDialog ... loading={loading} onConfirm={onConfirm} />
    </>
  );
}

API

属性	类型	默认值	说明
`open` / `v-model:open`	`boolean`	`false`	显示控制
`title`	`string`	—	主标题
`description`	`string`	—	描述
`tone`	`'default' \| 'danger'`	`'default'`	危险态用红色
`confirmText` / `cancelText`	`string`	`'确认'` / `'取消'`
`loading`	`boolean`	`false`	确认按钮 spinner
`closeOnOverlay` / `closeOnEsc`	`boolean`	`false` / `true`

事件：confirm、cancel、update:open。