本篇参考：
https://developer.salesforce.com/blogs/2022/01/preparing-your-components-for-the-removal-of-alert-confirm-prompt
https://help.salesforce.com/s/articleView?id=release-notes.rn_lc_alert_confirm_prompt.htm&type=5&release=238
https://developer.salesforce.com/docs/component-library/bundle/lightning-alert/documentation
【一百二十 salesforce零基础学习快去迁移你的代码中的 Alert / Confirm 以及 Prompt吧】https://developer.salesforce.com/docs/component-library/bundle/lightning-confirm/documentation
我们在项目中可能会用到 alert 或者 confirm方法来实现一些交互性效果 。比如不满足指定的条件 ， 我们需要alert提供一些文字来告诉用户当前数据问题 ， 引导用户正确操作 。当我们对数据删除或者对敏感信息修改时 ， 可能需要弹出一个 confirm来实现强调效果 。
当然 ， 上述内容可以通过toast或者 modal方式来实现 ， 如果在项目中最开始使用了这些最好 ， 但是既有的代码就是存在使用了 alert / confirm / prompt的js方法了 ， 很不幸的是 ， 我们最好要替换掉这些方法避免不必要的问题 。https://github.com/whatwg/html/issues/5407 通过这个链接可以看到js的提案为不允许跨源iframes使用window的 alert / confirm / prompt.
当然这里有一个前提 ， 就是 cross-origin ， 也就是说你的代码里面尽管使用了这些 ， 但是可能还可以正常运行 ， 因为你没有cross-origin 。目前谷歌以及safari的一些版本已经不再支持 ， 所以为了避免后续不必要的问题 ， salesforce推荐我们迁移至安全的封装好的组件上 。当然实际的UI会有一些区别 ， 替换以前建议给客户做demo看一下效果 。官方针对 classic场景以及aura / lwc都已经介绍了解决方案 。这里啰嗦一下 lwc这里的alert的一个实现 。
Lwc中使用 async/await 或者 .then()的方式来执行 ， 而且这个组件可以在任何方法体内调用 。官方demo中使用的 async方式 ， demo中补一下 Promise方式 。Promise的then是在弹出的modal点击OK以后调用的 ， 所以如果方法中不需要针对OK以后执行什么操作 ， 则可以使用 async / await方式 ， 否则使用 .then ， 比如之前有 loading的spinner ， 当报错展示 alert以后 ， 需要将 spinner隐藏即可使用 Promise方式 。
myApp.html
<template><lightning-button onclick={handleAlertClick} label="Open Alert Modal"></lightning-button><template if:true={showSpinner}><lightning-spinner alternative-text="loading..."></lightning-spinner></template></template>myApp.js
import { LightningElement } from 'lwc';import LightningAlert from 'lightning/alert';export default class MyApp extends LightningElement {showSpinner = false;// 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 has been closed// }handleAlertClick() {/*theme available optionsdefault: whiteshade: grayinverse: dark bluealt-inverse: darker bluesuccess: greeninfo: gray-ish bluewarning: yellowerror: redoffline: ?black*/this.showSpinner = true;LightningAlert.open({message: 'this is the alert message',theme: 'error', // a red theme intended for error stateslabel: 'Error!', // this is the header textvariant: "header"}).then((result) => {//当点击OK按钮以后的调用内容console.log('execute')this.showSpinner = false;});}}显示效果
文章插图
总结：篇中只是针对这个功能简单demo ， 详情可以查看上方的文档 。篇中有错误欢迎指出 ， 有不懂欢迎留言 。
经验总结扩展阅读
- 零食批发商进货渠道是什么
- 怎么玩好明日之后（明日之后从零开始教程)
- 2023年农历十一月初七搬家好不好 农历二零二三年冬月初七适合搬家吗
- 2023年农历十一月十二能搬家吗农历二零二三年冬月十二能不能搬家
- 2023年农历十一月十六能不能搬家入伙农历二零二三年冬月十六能不能搬家
- 2023年农历十一月十八可以搬家吗农历二零二三年冬月十八能不能搬家
- 2023年农历十一月十九能搬家吗农历二零二三年冬月十九适合搬家吗
- 2023年农历十一月十二能搬家吗 农历二零二三年冬月十二能不能搬家
- 二零二二年腊月动土吉日有哪几天 2022年阴历十二月适合建房动土的好日子
- .NET 零开销抽象指南