Toast Notifications & Toast Container

DEX475 - Open Modal Windows and Notifications

📄 第 370 页 🎬 视频课程

课程章节介绍

好,同学们,我们现在来讲一下Salesforce里的吐司通知,就是那个在页面顶部弹出的小提示条。在Lightning Web Components中,我们有新旧两种方式来实现它。 首先,首选的方法是使用`lightning/toast`模块。这个模块功能更强大,支持在标题和消息里插入可点击的链接。插入链接有两种格式。第一种是基于数组的格式,你在文本里用{0}、{1}这种占位符,然后通过一个叫`labelLinks`的数组来提供实际的链接数据,比如链接地址和显示文字。第二种是基于对象的格式,更直观一些,你在文本里用`{linkName}`这样的占位符,然后提供一个叫`messageLinks`的对象,里面键就是占位符名字,值就是链接信息。另外要特别注意,调用这个模块的`show`方法时,你必须要传入`this`作为第二个参数,这样才能正确关联当前组件的上下文。 接下来是旧版的方式,也就是`lightning/platformShowToastEvent`,通过事件派发来实现。它使用起来更简单,但有两个限制:一是不支持在LWR网站和独立应用中使用,二是不能在标题里添加内联链接。所以如果你只是做个简单的提示,并且确保运行在Salesforce标准环境里,旧方式也够用。 两种方式都支持四种外观变体:成功(绿色)、错误(红色)、警告(橙色)和信息(蓝色)。也支持两种显示模式:一种是可以自动消失的,通常几秒后自己关闭;另一种是粘性的,会一直停留直到用户手动关掉。所以你可以根据需要选择。 不管用哪种方式生成的吐司,它们都由一个叫`lightning/toastContainer`的组件来统一管理。这个容器负责显示、排队和布局。我们可以通过属性进行配置,比如`max-toasts`设置最多同时显示几条,默认是3条;`toast-position`设置吐司出现的屏幕位置,默认是顶部居中;当同时触发多条吐司时,容器会按照先后顺序排队显示。记住,每个页面只需要一个toast容器实例就足够了,多余的会自动被忽略,所以别重复放多个容器。 总结一下,如果你项目里需要支持LWR站点,或者想在提示里添加可点击的链接,就用新模块`lightning/toast`,记得传`this`。如果只是简单场景,旧事件方式也行,但要清楚它的局限。还有就是别忘了页面上放一个`lightning/toast-container`,并设置好你需要的参数。 好了,这就是吐司通知的内容,是不是简单明了?我们继续下一节。

关键词

LWC Lightning Web Components Salesforce