useConfirm

Hộp thoại xác nhận dạng promise: await confirm(...) trả true khi người dùng đồng ý, false khi huỷ hoặc đóng.

Dùng khi: hành động không hoàn tác được — xoá, huỷ đơn, thu hồi, gửi duyệt.

Không dùng khi: hành động bình thường có thể làm lại. Hỏi lại quá nhiều khiến người dùng bấm "Đồng ý" theo phản xạ, đúng lúc cần đọc thì họ không đọc nữa.

<script setup lang="ts">
import { ref } from 'vue'
import { message, useConfirm } from '@tasco/ui'

// Hộp thoại xác nhận dạng promise: await trả true khi bấm Đồng ý, false khi Huỷ.
const confirm = useConfirm()
const orders = ref(['DH-0001', 'DH-0002', 'DH-0003'])

async function remove(code: string) {
  const ok = await confirm({
    title: 'Xoá đơn hàng?',
    content: `Đơn ${code} sẽ bị xoá vĩnh viễn và không khôi phục được.`,
    okText: 'Xoá đơn',
    danger: true,
  })
  if (!ok) {
    message.info('Đã huỷ thao tác.')
    return
  }
  orders.value = orders.value.filter((item) => item !== code)
  message.success(`Đã xoá ${code}.`)
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 8px; max-width: 320px">
    <div
      v-for="code in orders"
      :key="code"
      style="display: flex; align-items: center; gap: 12px"
    >
      <span style="flex: 1">{{ code }}</span>
      <CButton
        variant="danger"
        size="sm"
        @click="remove(code)"
      >
        Xoá
      </CButton>
    </div>

    <CEmpty
      v-if="!orders.length"
      description="Đã xoá hết đơn hàng trong ví dụ."
      bordered
    />
  </div>
</template>

Dùng

import { useConfirm } from '@tasco/ui'

const confirm = useConfirm()

async function remove(order: Order) {
  const ok = await confirm({
    title: 'Xoá đơn hàng?',
    content: `Đơn ${order.code} sẽ bị xoá vĩnh viễn.`,
    okText: 'Xoá đơn',
    danger: true,
  })
  if (!ok) return

  await removeOrder(order.id)
  message.success('Đã xoá đơn hàng.')
}

useConfirm nằm ở @tasco/ui (phụ thuộc antd Modal) nên không được auto-import — luôn phải import.

Tuỳ chọn

Khoá	Mặc định	Ghi chú
title	Xác nhận	Câu hỏi — viết dạng câu hỏi có đối tượng cụ thể
content	—	Hệ quả của hành động
okText	Đồng ý	Nên là động từ của hành động ("Xoá đơn")
cancelText	Huỷ
danger	false	Nút đồng ý màu nguy hiểm

Viết câu hỏi

Tránh	Viết thay
"Bạn có chắc không?"	"Xoá đơn DH-0001?"
"Thao tác này không thể hoàn tác."	"Đơn DH-0001 sẽ bị xoá vĩnh viễn và không khôi phục được."
Nút "OK"	Nút "Xoá đơn"

Nêu đối tượng bị tác động và số lượng khi làm hàng loạt: "Xoá 12 đơn hàng đã chọn?".

Lưu ý

• Chỉ dùng cho việc phá huỷ. Xác nhận cho thao tác thường là tiếng ồn.
• Hộp thoại không tự chạy hành động: người gọi kiểm tra kết quả rồi mới thực hiện.
• Hành động chạy lâu thì sau khi xác nhận nên khoá nút và hiện trạng thái — hộp thoại đóng ngay khi bấm.
• Cần form nhập thêm (lý do huỷ) thì dùng CModal với nội dung riêng, không dùng useConfirm.

Liên quan

• useErrorHandler — hiển thị lỗi sau khi hành động thất bại.
• Trang chi tiết — mẫu hành động xoá.