kt-template-admin/skills/references/components/business/alert.md

Vben Alert 轻量提示框

提供纯 JavaScript 调用的轻量提示框，适合快速创建 alert、confirm、prompt 这类简单交互。

Alert 提示框

import { alert } from '@vben/common-ui';

// 基础用法
await alert('操作成功');

// 带标题
await alert('操作成功', '提示');

// 完整配置
await alert({
  title: '提示',
  content: '操作成功',
  icon: 'success', // 'error' | 'info' | 'question' | 'success' | 'warning'
  confirmText: '确定',
  centered: true,
});

Confirm 确认框

import { confirm } from '@vben/common-ui';

// 基础用法
const result = await confirm('确定要删除吗？');
if (result) {
  // 用户点击确认
}

// 完整配置
const result = await confirm({
  title: '确认删除',
  content: '删除后数据无法恢复，确定要删除吗？',
  icon: 'warning',
  confirmText: '删除',
  cancelText: '取消',
  beforeClose: async ({ isConfirm }) => {
    if (isConfirm) {
      // 返回 false 阻止关闭
      return await doDelete();
    }
    return true;
  },
});

Prompt 输入框

import { prompt } from '@vben/common-ui';

// 基础用法
const value = await prompt('请输入名称：');
if (value) {
  console.log('用户输入:', value);
}

// 带默认值
const value = await prompt({
  title: '请输入名称',
  defaultValue: '默认名称',
});

// 自定义输入组件
const value = await prompt({
  title: '请选择类型',
  component: Select,
  componentProps: {
    options: [
      { label: '类型A', value: 'a' },
      { label: '类型B', value: 'b' },
    ],
  },
  defaultValue: 'a',
});

useAlertContext

在自定义组件内获取弹窗上下文：

<script setup lang="ts">
import { useAlertContext } from '@vben/common-ui';

const { doConfirm, doCancel } = useAlertContext();

function handleConfirm() {
  // 触发确认操作
  doConfirm();
}

function handleCancel() {
  // 触发取消操作
  doCancel();
}
</script>

Props 类型

type IconType = 'error' | 'info' | 'question' | 'success' | 'warning';

interface AlertProps {
  title?: string;
  content: Component | string;
  icon?: Component | IconType;
  confirmText?: string;
  cancelText?: string;
  showCancel?: boolean;
  centered?: boolean;
  bordered?: boolean;
  buttonAlign?: 'center' | 'end' | 'start';
  overlayBlur?: number;
  beforeClose?: (scope: { isConfirm: boolean }) => boolean | Promise<boolean>;
  footer?: Component | string;
}

interface PromptProps<T = any> extends AlertProps {
  component?: Component;
  componentProps?: Record<string, any>;
  defaultValue?: T;
  modelPropName?: string;
}

使用场景

• 简单的确认提示
• 删除操作确认
• 快速输入收集
• 不需要复杂布局的弹窗

与 Modal 的区别

特性	Alert	Modal
调用方式	纯JS调用	组件式
复杂度	简单	可复杂
自定义内容	有限	完全自定义
表单支持	prompt有限	完整支持
适用场景	快速确认/提示	复杂弹窗业务