本篇参考：
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
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.
【一百二十 salesforce零基础学习快去迁移你的代码中的 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，详情可以查看上方的文档 。篇中有错误欢迎指出 ， 有不懂欢迎留言 。
推荐阅读
- 怎么玩好明日之后（明日之后从零开始教程)
- .NET 零开销抽象指南
- 四十 Salesforce LWC学习 dynamic interaction 浅入浅出
- 零基础如何学游戏编程（游戏编程学习入门)
- 女性十大品牌内衣排行榜前十名:爱慕第2 第4服饰零售名牌
- 零报告怎么写 每日零报告制度
- 英雄联盟怎么玩好（零基础玩英雄联盟端游)
- 【Java】Java中的零拷贝
- 学生怎样可以简单赚零花钱（正规渠道赚点零花钱)
- 【C++】从零开始的CS:GO逆向分析3——写出一个透视