【探索LWC开发之】 使用'lightning/platformShowToastEvent' 弹出提示消息
2023年08月28日
文章浏览:280

"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>


关注 收藏