弹窗

Modal（弹窗）是一个对话框组件，用于在当前页面之上展示重要信息、警告提示或需要确认的操作。Modal 提供了多种类型（确认、警告、错误、成功等），帮助应用实现统一的弹窗交互体验。

快速开始​

以下示例展示了弹窗的基本实现方式：

import Client, { shared, Modal, ModalAction } from '@shoplineos/app-bridge';
// 1. 初始化 App Bridge
const app = Client.createApp({
  appKey: 'your-app-key',
  host: shared.getHost(),
});
// 2. 创建 Modal 实例
const modal = Modal.create(app);
// 3. 打开确认弹窗
modal.open({
  type: 'confirm',
  title: '确认删除',
  content: '确定要删除这个商品吗？此操作无法撤销。',
});
// 4. 订阅确认事件
modal.subscribe(ModalAction.MODAL_SAVE, () => {
  console.log('点击了确认');
  // 执行删除操作
});
// 5. 订阅取消事件
modal.subscribe(ModalAction.MODAL_CLOSE, () => {
  console.log('点击了取消');
});

当调用 open() 方法后，会在页面中弹出对应弹窗。确认弹窗的效果如下：

API 方法​

open()​

(config: ModalProps): void

打开弹窗。

参数​

参数类型说明必填
configModalProps弹窗配置，详见下方 类型定义 中的参数说明。是

使用示例​

// 确认弹窗
modal.open({
  type: 'confirm',
  title: '确认操作',
  content: '确定要继续吗？',
});
// 危险操作弹窗
modal.open({
  type: 'danger',
  title: '危险操作',
  content: '此操作将永久删除数据，无法恢复！',
});
// 错误提示弹窗
modal.open({
  type: 'error',
  title: '操作失败',
  content: '保存失败，请稍后重试。',
});
// 成功提示弹窗
modal.open({
  type: 'success',
  title: '操作成功',
  content: '商品已成功保存。',
});
// 警告弹窗
modal.open({
  type: 'warn',
  title: '警告',
  content: '有未保存的更改，确定要离开吗？',
});
// 信息提示弹窗
modal.open({
  type: 'info',
  title: '提示',
  content: '该功能即将上线，敬请期待。',
});

subscribe()​

(action: ModalAction, callback: () => void, once?: boolean): () => void

订阅弹窗的动作事件（如确认、取消等）。

参数​

参数类型说明必填
actionModalAction订阅的动作类型，详见下方 类型定义 中的动作类型说明。是
callback() => void动作触发时的回调函数。是
onceboolean是否在触发一次后自动取消订阅。
• true：表示触发一次后自动取消订阅。
• false：表示触发后不会自动取消订阅，需要手动取消订阅。		否

返回值​

返回一个取消订阅函数，调用它可以取消当前订阅。

使用示例​

// 订阅确认事件
const unsubscribe = modal.subscribe(ModalAction.MODAL_SAVE, () => {
  console.log('确认了操作');
  // 执行相应的业务逻辑
});
// 取消订阅
unsubscribe();
// 订阅一次性事件（触发后自动取消订阅）
modal.subscribe(
  ModalAction.MODAL_SAVE,
  () => {
    console.log('这个回调只会执行一次');
  },
  true,
);

unsubscribe()​

(action: ModalAction): void

取消指定动作的所有订阅。

参数​

参数类型说明必填
actionModalAction取消订阅的动作类型，详见下方 类型定义 中的动作类型说明。是

使用示例​

// 取消所有 MODAL_SAVE 动作的订阅
modal.unsubscribe(ModalAction.MODAL_SAVE);

类型定义​

ModalProps​

open() 方法的配置参数。

参数类型说明必填
type'confirm' | 'danger' | 'error' | 'warn' | 'info' | 'success'弹窗类型，决定弹窗的样式和图标。是
titlestring弹窗标题文本。是
contentstring弹窗内容文本。是

弹窗类型说明：

类型说明使用场景
confirm确认弹窗需要用户确认的操作
danger危险操作弹窗危险或不可逆的操作
error错误提示弹窗操作失败或错误提示
warn警告弹窗警告信息或注意事项
info信息提示弹窗一般性信息提示
success成功提示弹窗操作成功的反馈

ModalAction​

通过 subscribe() 方法订阅这些动作，监听弹窗的各种事件。

动作类型说明触发时机回调参数
MODAL_SAVE确认点击确认按钮时触发无
MODAL_CLOSE取消或关闭点击取消按钮或关闭弹窗时触发无

使用示例​

示例 1：删除确认​

const handleDelete = (productId) => {
  // 打开确认弹窗
  modal.open({
    type: 'danger',
    title: '确认删除',
    content: '确定要删除这个商品吗？此操作无法撤销。',
  });
  // 订阅确认事件（使用一次性订阅）
  modal.subscribe(
    ModalAction.MODAL_SAVE,
    async () => {
      try {
        // 执行删除操作
        await deleteProduct(productId);
        // 显示成功提示
        modal.open({
          type: 'success',
          title: '删除成功',
          content: '商品已成功删除。',
        });
      } catch (error) {
        // 显示错误提示
        modal.open({
          type: 'error',
          title: '删除失败',
          content: '删除商品时发生错误，请稍后重试。',
        });
      }
    },
    true, // 一次性订阅
  );
};

示例 2：保存确认​

const handleSave = (formData) => {
  modal.open({
    type: 'confirm',
    title: '确认保存',
    content: '确定要保存当前的修改吗？',
  });
  modal.subscribe(
    ModalAction.MODAL_SAVE,
    async () => {
      try {
        await saveData(formData);
        modal.open({
          type: 'success',
          title: '保存成功',
          content: '数据已成功保存。',
        });
      } catch (error) {
        modal.open({
          type: 'error',
          title: '保存失败',
          content: error.message,
        });
      }
    },
    true,
  );
};

示例 3：退出确认​

const handleExit = () => {
  if (hasUnsavedChanges) {
    modal.open({
      type: 'warn',
      title: '未保存的更改',
      content: '有未保存的更改，确定要离开吗？',
    });
    modal.subscribe(
      ModalAction.MODAL_SAVE,
      () => {
        // 确认离开
        window.location.href = '/dashboard';
      },
      true,
    );
    modal.subscribe(
      ModalAction.MODAL_CLOSE,
      () => {
        // 取消离开
        console.log('取消了退出');
      },
      true,
    );
  } else {
    // 没有未保存的更改，直接离开
    window.location.href = '/dashboard';
  }
};
这篇文章对你有帮助吗？
SHOPLINE
SHOPLINE
SHOPLINE Enterprise
条款协议
隐私
条款
开发者协议
LinkedInEmail
LinkedInEmail
© Copyright 2013-2026 SHOPLINE Limited.