"Toast Message" 是指在移动应用程序或网页应用程序中弹出的短暂性通知。它通常以类似于弹出式小窗口的形式出现,显示一条简短的消息,以向用户传达关键信息,例如操作成功、错误提示、或者其他通知。
下面给出代码示例,仅供参考:
<template>
<div style="display:flex;">
<div style="padding:15px;" ><lightning-button variant="success" label="成功" title="success" onclick={handleSuccessClick}></lightning-button></div>
<div style="padding:15px;" ><lightning-button variant="destructive" label="错误" title="error" onclick={handleErrorClick}></lightning-button></div>
<div style="padding:15px;" ><lightning-button variant="destructive-text" label="警告" title="warning" onclick={handleWarningClick}></lightning-button></div>
<div style="padding:15px;" ><lightning-button variant="brand-outline" label="提示" title="info" onclick={handleInfoClick}></lightning-button></div>
</div>
</template>
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class ToastMessagePractice extends LightningElement {
handleSuccessClick(){
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: 'The operation was successful.',
variant: 'success',
})
);
}
handleErrorClick(){
this.dispatchEvent(
new ShowToastEvent({
title: 'Error',
message: 'The operation was failed.',
variant: 'error',
})
);
}
handleWarningClick(){
this.dispatchEvent(
new ShowToastEvent({
title: 'Warning',
message: 'The operation was not recommended.',
variant: 'warning',
})
);
}
handleInfoClick(){
this.dispatchEvent(
new ShowToastEvent({
title: 'Info',
message: 'The operation was started',
variant: 'info',
})
);
}
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>58.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__Tab</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<target>lightning__RecordPage</target>
<target>lightningCommunity__Page</target>
<target>lightningCommunity__Default</target>
</targets>
</LightningComponentBundle>