Creating Popovers (2 of 2)

DEX601 - Unit 6 Building Advanced Components

📄 第 455 页 🎬 视频课程

课程章节介绍

让我们来聊聊如何在Salesforce的Lightning组件中创建一个弹出窗口。这个功能非常实用,比如你想在用户点击某个按钮时,显示一些额外的信息或者提示。 首先,我们来看一下这个函数的定义,它叫做`ShowPopover`。这个函数接收三个参数:`component`、`event`和`helper`。这些参数是Lightning组件中常用的,`component`代表当前的组件,`event`是触发的事件,`helper`则是一些辅助函数。 在这个函数内部,我们使用了`component.find('overlayLib')`来找到一个名为`overlayLib`的库。这个库是用来管理弹出窗口的。然后,我们调用`showCustomPopover`方法来显示一个自定义的弹出窗口。 `showCustomPopover`方法接收一个对象作为参数,这个对象有几个重要的属性: - `body`:这是弹出窗口中显示的内容,比如这里我们写的是“这是我的Popover”。 - `referenceSelector`:这是弹出窗口要依附的元素的选择器,比如这里我们用的是`.mypopover`,这意味着弹出窗口会显示在类名为`mypopover`的元素旁边。 - `cssClass`:这是给弹出窗口添加的CSS类,可以用来自定义样式。这里我们添加了两个类:`popoverClass`和`cAw讲师`。 接下来,`showCustomPopover`方法返回一个Promise对象,我们可以在这个Promise的`then`方法中做一些后续操作。比如这里,我们使用了`setTimeout`函数,在3秒后关闭弹出窗口。`setTimeout`函数接收两个参数:一个是要执行的函数,另一个是延迟的时间(以毫秒为单位)。在这里,我们延迟了3000毫秒,也就是3秒,然后调用`overlay.close()`来关闭弹出窗口。 总结一下,这个`ShowPopover`函数的作用是:当它被调用时,会在指定的元素旁边显示一个弹出窗口,显示内容为“这是我的Popover”,并且在3秒后自动关闭。希望这个解释能帮助你理解如何在Salesforce中创建和管理弹出窗口。如果有任何问题,随时问我哦!