FcDesigner Pro

Appearance

消息提示 API ​

FormCreate 提供了 api.message 和 api.confirm 两个便捷的消息提示 API，让您可以在表单事件中轻松显示消息提示和确认对话框。

v6.1 新增功能：该 API 在 6.1 版本中引入，提供了统一的消息提示和确认对话框接口。

获取 API

在使用消息提示 API 之前，您需要先获取 API 对象。API 对象可以通过事件、验证函数、钩子函数等方式获取。

详细说明请查看：如何获取 API

数据类型 ​

ts
type Message = (message: string, type?: string, options?: Object) => any;
type Confirm = (message: string, title?: string, options?: Object) => Promise;

api.message ​

用于显示消息提示，支持多种消息类型（success、error、warning、info 等），可以在表单操作后给用户提供即时反馈。

基本用法 ​

js
// 字符串参数
api.message('这是一条消息');
api.message('操作成功', 'success');

消息类型 ​

  • success - 成功消息
  • error - 错误消息
  • warning - 警告消息
  • info - 信息消息
  • primary - 主要消息

使用示例 ​

js
{
    type: 'button',
    field: 'submitBtn',
    title: '提交',
    on: {
        click: function($inject) {
            const api = $inject.api;
            api.validate().then(() => {
                api.message('提交成功！', 'success');
            }).catch(() => {
                api.message('请检查表单数据', 'warning');
            });
        }
    }
}

api.confirm ​

用于显示确认对话框，常用于删除确认、操作确认等需要用户二次确认的场景。该方法返回 Promise，可以通过 .then() 和 .catch() 处理用户的选择。

基本用法 ​

js
api.confirm('确定要删除这条记录吗？', '提示').then(() => {
    // 用户点击确定
    api.message('操作已确认', 'success');
}).catch(() => {
    // 用户点击取消或关闭
    api.message('操作已取消');
});

参数说明 ​

  • message (string) - 确认对话框的提示信息
  • title (string, 可选) - 对话框的标题
  • options (object, 可选) - 配置选项

返回值 ​

返回 Promise：resolve 表示用户点击确定，reject 表示用户点击取消或关闭。

使用示例 ​

js
{
    type: 'button',
    field: 'deleteBtn',
    title: '删除',
    on: {
        click: function($inject) {
            const api = $inject.api;
            api.confirm('确定要删除吗？删除后无法恢复！', '删除确认').then(() => {
                api.message('删除成功', 'success');
            });
        }
    }
}

不同 UI 版本的差异 ​

Element Plus 版本 ​

  • message 类型：支持 success、error、warning、info、primary
  • confirm 配置：支持 Element Plus ElMessageBox.confirm 的所有配置选项
  • 返回值：api.message 返回 ElMessage 实例，可调用 close() 方法
js
// Element Plus 特有配置
api.message({
    showClose: true,        // 显示关闭按钮
    center: true,           // 文字居中
    dangerouslyUseHTMLString: true
});

api.confirm('提示', '标题', {
    distinguishCancelAndClose: true,  // 区分取消和关闭
    roundButton: true,                 // 圆角按钮
    buttonSize: 'large'                // 按钮大小
});

Ant Design Vue 版本 ​

  • message 类型：支持 success、error、warning、info（不支持 primary）
  • message 参数：对象配置中可使用 content 或 message 作为消息内容
  • confirm 配置：支持 Ant Design Vue Modal.confirm 的所有配置选项
js
// Ant Design Vue 特有用法
api.message({
    content: '提示信息',  // 可使用 content 或 message
    type: 'success'
});

api.confirm('提示内容', '标题', {
    okText: '确定',       // 确认按钮文字（替代 confirmButtonText）
    cancelText: '取消',   // 取消按钮文字（替代 cancelButtonText）
    okType: 'danger'      // 确认按钮类型
});

移动端版本（Vant） ​

  • message 类型：error 自动映射为 fail，primary 自动映射为 text
  • 支持类型：success、fail、loading、text
  • confirm 配置：支持 Vant showConfirmDialog 的所有配置选项
js
// Vant 特有用法
api.message('加载中...', 'loading');
api.message('操作失败', 'error');  // 实际显示为 fail 类型

api.confirm('提示', '标题', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    confirmButtonColor: '#ee0a24'  // 确认按钮颜色
});

相关链接 ​