#ctx.message

API message global của Ant Design, dùng để hiển thị thông báo nhẹ tạm thời ở giữa trên cùng của page. Tin nhắn sẽ tự động đóng sau một khoảng thời gian nhất định, cũng có thể đóng thủ công bởi người dùng.

#Kịch bản áp dụng

#Định nghĩa kiểu

message: MessageInstance;

MessageInstance là interface message của Ant Design, cung cấp các phương thức sau.

#Phương thức thường dùng

Tham số:

• content (string | ConfigOptions): Nội dung tin nhắn hoặc object cấu hình
• duration (number, tùy chọn): Thời gian trễ tự động đóng (giây), mặc định 3 giây; đặt 0 nghĩa là không tự động đóng

ConfigOptions (khi content là object):

interface ConfigOptions {
  content: React.ReactNode;  // 消息内容
  duration?: number;        // 自动关闭延迟（秒）
  onClose?: () => void;    // 关闭回调
  icon?: React.ReactNode;  // 自定义图标
}

#Ví dụ

#Cách dùng cơ bản

ctx.message.success('操作成功');
ctx.message.error('操作失败');
ctx.message.warning('请先选择数据');
ctx.message.info('正在处理...');

#Kết hợp với ctx.t cho i18n

ctx.message.success(ctx.t('Copied'));
ctx.message.warning(ctx.t('Please select at least one row'));
ctx.message.success(ctx.t('Exported {{count}} records', { count: rows.length }));

#loading và đóng thủ công

const hide = ctx.message.loading(ctx.t('Saving...'));
// 执行异步操作
await saveData();
hide();  // 手动关闭 loading
ctx.message.success(ctx.t('Saved'));

#Dùng open với cấu hình tùy chỉnh

ctx.message.open({
  type: 'success',
  content: '自定义成功提示',
  duration: 5,
  onClose: () => console.log('message closed'),
});

#Đóng tất cả message

ctx.message.destroy();

#Khác biệt với ctx.notification

#Liên quan

• ctx.notification - Thông báo góc trên bên phải, phù hợp hiển thị thời gian dài hơn
• ctx.modal - Popup xác nhận, tương tác blocking
• ctx.t() - i18n, thường được dùng kết hợp với message