显示通知

组件可以发送弹出的通知以提醒用户、请求用户确认、提示响应或仅提供信息。

警报模态

使用警报模式来停止用户，并传达影响其系统、功能或页面的紧急错误。要在 Lightning Experience 中显示警报模式，请从模块导入，然后使用所需的属性进行调用。LightningAlertlightning/alertLightningAlert.open()

注意

此警报模式是原生函数的替代方法，Chrome 和 Safari 中的跨域 iframe 不支持该函数。与本机警报函数不同，它不会停止页面上的执行，而是返回 Promise。使用 / 或 用于要在模式关闭后执行的任何代码。window.alert()LightningAlert.open()asyncawait.then()

此示例组件创建一个按钮，用于打开在屏幕截图中看到的警报模式 UI。通常，错误条件会触发警报模式的显示。

<!-- c/myApp.html -->
<template>
  <lightning-button onclick={handleAlertClick} label="Open Alert Modal"> </lightning-button>
</template>

在打开警报模式的组件的 JavaScript 文件中导入。创建并调度具有 、 和 属性的事件。该函数返回一个 promise，当您单击“确定”时，该 promise 将解析。LightningAlertlightning/alertLightningAlertmessagethemelabel.open()

// c/myApp.js
import { LightningElement } from "lwc";
import LightningAlert from "lightning/alert";

export default class MyApp extends LightningElement {
  async handleAlertClick() {
    await LightningAlert.open({
      message: "This is the alert message.",
      theme: "error", // a red theme intended for error states
      label: "Error!", // this is the header text
    });
    // alert modal has been closed
  }
}

有关警报模式属性的信息，请参阅组件参考。

确认模态

使用确认模式要求用户在继续操作之前做出响应。要在 Lightning Experience 中显示确认模式，请从模块导入，然后使用所需的属性进行调用。LightningConfirmlightning/confirmLightningConfirm.open()

注意

此确认模式是原生函数的替代方法，Chrome 和 Safari 中的跨域 iframe 不支持该函数。与本机 confirm 函数不同，它不会停止页面上的执行，而是返回一个 Promise。使用 / 或 用于要在模式关闭后执行的任何代码。window.confirm()LightningConfirm.open()asyncawait.then()

此示例组件创建一个按钮，用于打开您在屏幕截图中看到的确认模式 UI。

<!-- c/myApp.html -->
<template>
  <lightning-button onclick={handleConfirmClick} label="Open Confirm Modal"> </lightning-button>
</template>

在打开确认模式的组件的 JavaScript 文件中导入。创建并调度具有 、 和 属性的事件。该函数返回一个 promise，该 promise 解析为单击“确定”和单击“取消”时。LightningConfirmlightning/confirmLightningConfirmmessagevariantlabel.open()truefalse

// c/myApp.js
import { LightningElement } from "lwc";
import LightningConfirm from "lightning/confirm";

export default class MyApp extends LightningElement {
  async handleConfirmClick() {
    const result = await LightningConfirm.open({
      message: "This is the confirmation message.",
      variant: "headerless",
      label: "This is the aria-label value",
      // label value isn't visible in the headerless variant
    });
    // confirm modal has been closed
  }
}

有关确认模式的属性的信息，请参阅组件参考。

提示模态

使用提示模式要求用户在继续操作之前提供信息。要在 Lightning Experience 中显示提示模式，请从模块导入，然后使用所需的属性进行调用。LightningPromptlightning/promptLightningPrompt.open()

注意

此提示模式是原生函数的替代方法，Chrome 和 Safari 中的跨域 iframe 不支持该函数。与本机提示函数不同，它不会停止页面上的执行，而是返回 Promise。使用 / 或 用于要在模式关闭后执行的任何代码。window.prompt()LightningPrompt.open()asyncawait.then()

此示例组件创建一个按钮，用于打开在屏幕截图中看到的提示模式 UI。

<!-- c/myApp.html -->
<template>
  <lightning-button onclick={handlePromptClick} label="Open Prompt Modal"> </lightning-button>
</template>

在打开提示模式的组件的 JavaScript 文件中导入。创建并调度具有 、 、 和 属性的事件。如果用户输入文本并在提示中单击“确定”，则该函数将返回解析为输入值的 promise。如果用户单击“取消”，该函数将返回解析为 的 promise。LightningPromptlightning/promptLightningPromptmessagethemelabeldefaultValue.open()null

import { LightningElement } from "lwc";
import LightningPrompt from "lightning/prompt";

export default class MyApp extends LightningElement {
  handlePromptClick() {
    LightningPrompt.open({
      message: "This is the prompt message.",
      //theme defaults to "default"
      label: "Please Respond!", // this is the header text
      defaultValue: "Optional initial input value",
    }).then((result) => {
      // prompt modal has been closed
    });
  }
}

有关提示模式属性的信息，请参阅组件参考。

Toast 通知

组件可以发送弹出的 Toast 通知，以提醒用户成功、错误或警告。祝酒词也可以简单地提供信息。

要在 Experience Cloud 的 Lightning Experience 或 Aura 站点中显示 Toast 通知，请从模块导入。ShowToastEventlightning/platformShowToastEvent

注意

ShowToastEvent在 Aura 站点的登录页面上不受支持。 在 Experience Cloud 的 LWR 站点中也不受支持。请改用 lightning/toastContainer 模块 （Beta）。ShowToastEvent

lwc-recipes 存储库有一个组件，可用于自定义和发送 Toast，以便您可以尝试变体。

HTML 模板生成在屏幕截图中看到的 UI。

<!-- miscToastNotification.html -->
<template>
  <lightning-card title="miscToastNotification" icon-name="custom:custom19">
    <div class="slds-m-around_medium">
      <lightning-input label="Title" value={_title} onchange={titleChange}></lightning-input>
      <lightning-input
        label="Message"
        value={message}
        onchange={messageChange}>
      </lightning-input>
      <lightning-combobox
        label="Variant"
        value={variant}
        onchange={variantChange}
        options={variantOptions}>
      </lightning-combobox>
      <p class="slds-m-vertical_small">
        <lightning-button label="Show Notification" onclick={showNotification}></lightning-button>
      </p>
    </div>
  </lightning-card>
</template>

只需从 .创建和调度具有 、 、 和 属性的事件。此示例使用 的默认值 ，因此不包括在内。ShowToastEventlightning/platformShowToastEventShowToastEventtitlemessagevariantmodemode

// miscToastNotification.js
import { LightningElement } from "lwc";
import { ShowToastEvent } from "lightning/platformShowToastEvent";

export default class MiscToastNotification extends LightningElement {
  _title = "Sample Title";
  message = "Sample Message";
  variant = "error";
  variantOptions = [
    { label: "error", value: "error" },
    { label: "warning", value: "warning" },
    { label: "success", value: "success" },
    { label: "info", value: "info" },
  ];

  titleChange(event) {
    this._title = event.target.value;
  }

  messageChange(event) {
    this.message = event.target.value;
  }

  variantChange(event) {
    this.variant = event.target.value;
  }

  showNotification() {
    const evt = new ShowToastEvent({
      title: this._title,
      message: this.message,
      variant: this.variant,
    });
    this.dispatchEvent(evt);
  }
}

ShowToastEvent参数	类型	描述
title	字符串	Toast 的标题，显示为标题。
message	字符串	一个字符串，包含用户的消息。
messageData	String[] 或 Object	url以及替换字符串中占位符的值。label{index}message
variant	字符串	Toast 中显示的主题和图标。有效值为：info—（默认）带有信息图标的灰色框。success– 带有复选标记图标的绿色框。warning– 带有警告图标的黄色框。error– 带有错误图标的红色框。您可以在 Lightning Design System 文档中查看每个主题的样式。
mode	字符串	确定 Toast 的持久性。有效值为：dismissible—（默认）保持可见，直到用户单击关闭按钮或 3 秒过去，以先到者为准。pester– 保持可见 3 秒。sticky– 在用户单击关闭按钮之前保持可见。

提示

要运行此代码，请将 github.com/trailheadapps/lwc-recipes 源推送到 Salesforce 组织。