在salesforce中,有OOB的toast action,通常我们有两种做法:可以参考下面的链接:https://developer.salesforce.com/docs/component-library/bundle/lightning-platform-show-toast-event/documentation
Toast的样式有一下几种:
-
Base
-
Success
-
Warning
-
Error
-
Error with Details
具体写法如下:
showErrorToast() {
const evt = new ShowToastEvent({
title: 'Toast Error',
message: 'Some unexpected error',
variant: 'error',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
showSuccessToast() {
const evt = new ShowToastEvent({
title: 'Toast Success',
message: 'Opearion sucessful',
variant: 'success',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
showWarningToast() {
const evt = new ShowToastEvent({
title: 'Toast Warning',
message: 'Some problem',
variant: 'warning',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
showInfoToast() {
const evt = new ShowToastEvent({
title: 'Toast Info',
message: 'Operation will run in background',
variant: 'info',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
}
但是不要忘了 Import Toast Message
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
还有一种需求是需要在Toast里面加入链接:主要是对messageData 的属性值赋值。但是也不要忘了 Import Navigation和Extend NavigationMixin。里面要考虑到占位符的使用。
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
export default class LightningToastExample extends NavigationMixin(LightningElement) {
handleButtonClick() {
const event = new ShowToastEvent({
"title": "Success!",
"message": "Record {0} created! See it {1}!",
"messageData": [
'Salesforce',
{
url: 'http://www.salesforce.com/',
label: 'here'
}
]
});
this.dispatchEvent(event);
}
handleRecordClick() {
this[NavigationMixin.GenerateUrl]({
type: 'standard__recordPage',
attributes: {
recordId: '003xx000000001eAAA',
actionName: 'view',
},
}).then(url => {
const event = new ShowToastEvent({
"title": "Success!",
"message": "Record {0} created! See it {1}!",
"messageData": [
'Salesforce',
{
url,
label: 'here'
}
]
});
this.dispatchEvent(event);
});
}
}