使用 Toast 消息在 LWC 中插入数据时提供反馈

在 LWC 中，我们经常需要向后端插入数据，并期望在操作成功或失败时向用户提供反馈。为此，我们可以使用 Toast 消息，将消息显示在 UI 上，以便用户及时了解操作结果。

创建 Toast 消息

要在 LWC 中创建 Toast 消息，我们需要使用 ShowToastEvent，该事件可以通知 Lightning Experience 用户显示可以关闭的消息。在 LWC 代码中，我们可以按如下方式引入该事件：

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

接下来，我们需要使用 this.dispatchEvent 方法，在 UI 上触发消息显示。我们可以将以下代码片段插入到插入数据代码的成功或失败处理程序中，以显示对应的 Toast 消息：

// 成功或失败的处理程序中
if (response.ok) {
    // 插入成功
    this.dispatchEvent(
        new ShowToastEvent({
            title: 'Success!',
            message: 'Data has been inserted successfully.',
            variant: 'success',
        }),
    );
} else {
    // 插入失败
    this.dispatchEvent(
        new ShowToastEvent({
            title: 'Error!',
            message: 'Failed to insert data.',
            variant: 'error',
        }),
    );
}

在上述代码片段中，我们向 ShowToastEvent 构造函数传递三个参数：

• title - Toast 消息的标题
• message - Toast 消息的正文
• variant - Toast 消息的样式（success、warning、error 等）

您还可以选择向 ShowToastEvent 构造函数传递其他可选参数，如触发 Toast 消息时的隐藏处理程序等。

Toast 消息的显示

当 ShowToastEvent 被 this.dispatchEvent 触发时，UI 上将立即显示 Toast 消息。Toast 消息将在屏幕的顶部显示一段时间（通常为 5 秒），然后自动隐藏。如果用户希望在消息显示期间查看 Toast 内容，他们可以单击 Toast 消息。

结论

在 LWC 中使用 Toast 消息，在数据插入成功或失败时向用户提供反馈，可以增强用户体验，并让用户知道他们的操作结果。通过使用 ShowToastEvent，我们可以方便地创建和显示 Toast 消息，从而使 LWC 更吸引人。