salesforce lightning零基础学习(十四) Toast 浅入浅出

本篇参考：

https://developer.salesforce.com/docs/component-library/bundle/force:showToast/specification

https://archive-2_9_4.lightningdesignsystem.com/components/toast/

Toast在项目中是基本不可能用不到的组件，用于在页面头部展现一条消息。以前也常常的用，可是没有深刻的研究过，最近正好开始作lightning项目，便深刻研究了一下，发现比之前了解的稍微多点，特此总结，便于之后的查看以及给没有接触过的小伙伴扫个盲。

一. Toast

Toast 用于在页面的头部展现一条消息，好比咱们在更新数据完成后会提示修改为功，出现异常会提示更新失败等。Lightning将Toast封装成了事件，咱们只须要根据指定的步骤获取Toast事件而且进行fire触发便可。下方的demo中展现了toast的使用，使用 $A.get("e.force:showToast")即可以获取事件，添加相关的属性触发便可实现Toast功能。

showToast : function(component, event, helper) { var toastEvent = $A.get("e.force:showToast"); toastEvent.setParams({ "title": "Success!", "message": "The record has been updated successfully." }); toastEvent.fire(); }

那么 Toast 有哪些参数呢？

• title：此参数用于展现message的标题区域，一般标题会以稍微大的字体展现在上方；
• duration：此参数用于设置当前的Toast展现多久后自动消失，单位为毫秒，此属性能够不填写，默认为5秒中，若是设置的时间不足5秒也会按照5秒处理；
• message：此参数用于展现显示Toast的内容；
• mode：Toast展现的模式，Toast支持三种模式：dismissible(展现的消息包含一个关闭按钮，若是点击按钮则能够立刻Toast消失，若是不点击则默认过5秒消失，这个是默认选项) / pester（不展现关闭按钮，过几秒之后自动消失） / sticky（只展现关闭按钮，不点击关闭按钮则永远不消失）
• type：Toast的类型，不一样的类型会展现不一样的图标以及不一样的颜色样式。可选择的值有： error / warning / success / info / other。 前四个咱们可能常常用，最后一个不常常用，其实other是此属性的默认值，展现的颜色样式和info相同，区别是此种不展现图标。固然不展现图标不是绝对的，若是搭配了key属性能够展现其余的图标，因此若是咱们想要展现info的样式可是不想使用info的图标，咱们能够考虑使用other而后设置key便可。
• key：当咱们的type选择了other的状况下，此处能够指定toast里面展现的other图标，名字能够在lightning design system的icon中选择。
• messageTemplate： 上面的message用于Toast的消息展现，可是只能展现String字符串的信息，若是咱们须要其余加强的功能展现（好比想要在toast的message中展现一个能够点击的URL），咱们须要使用messageTemplate经过placeholder放入形参，使用messageTemplateData进行填充。 messageTemplate的placeholder很像咱们在custom label中声明，也是从0开始，使用{}.好比Record {0} created! See it {1}这里就设置了两个placeholder，messageTemplateData须要传两个参数进来。
• messageTemplateData：当时用了messageTemplate之后，须要使用此属性去将placeholder的值进行替换，里面封装的是一组text文本以及其对应的action。

除了Toast之外，小伙伴们能够自行查看： lightning:overlayLibrary（经过Modal 以及 popover展现消息） / lightning:notificationsLibrary（经过notice和toast方式展现消息）

上面既然已经描述完Toast的全部属性以及Toast所能实现的功能，那么咱们接下来对经常使用的展现能够进行一些简单的优化和处理。

场景一. 内容多行展现

Toast默认只能展现单行的内容，咱们作了一个demo，将toast设置了sticky，这样咱们能够查看到Toast的html的解析的实现，实现以下图所示。经过图片中的css内容咱们能够看到toast的内容使用toastMessage forceActionsText两个进行渲染，由于css渲染也有先后顺序，咱们只须要对这两个css样式进行重写，设置white-space: pre-line !important; 便可，意为若是有空格状况下，合并全部空行而且保留换行，而后message中对须要换行的地方使用\n进行字符串分隔便可从而实现换行的。

咱们尝试的在当前的component bundle的css从新渲染此样式发现不可用，因此只能引入外部的static resource覆盖此样式。

.toastMessage.forceActionsText{ white-space : pre-line !important;
}

方式为建立css,内容为上面描述的内容，而后命名上传到 static resource，代码引入便可。demo中咱们命名的static resource名称为multipleLineToastCss。

代码中咱们只须要<ltng:require styles="{!$Resource.multipleLineToastCss}"/>便可。

 咱们作了简单的demo去验证：

<aura:component implements="flexipage:availableForAllPageTypes">
    <ltng:require styles="{!$Resource.multipleLineToastCss}"/>
    <lightning:button variant="brand" label="show toast" onclick="{!c.showToast}"/>
</aura:component>

对应的controller.js

showToast : function(component, event, helper) { var toastEvent = $A.get("e.force:showToast"); toastEvent.setParams({ mode: 'sticky', title: 'Info', type: 'info', message: 'test message\ntest multiple lines' }); toastEvent.fire(); }

场景二.  Toast展现可点击的URL

某些场景下，咱们须要展现Toast的时候搭配URL，用户点击URL后跳转到某个页面。此种状况下咱们只须要使用 messageTemplate 以及 messageTemplateData进行搭配便可实现。

showMyToast : function(component, event, helper) { var toastEvent = $A.get("e.force:showToast"); toastEvent.setParams({ mode: 'sticky', message: 'This is a required message', messageTemplate: 'Record {0} created! See it {1}!', messageTemplateData: ['Salesforce', { url: 'http://www.salesforce.com/', label: 'here', } ] }); toastEvent.fire(); }

 场景三. 换 Toast的message的图标

咱们知道当toast的type赋值时，针对success/warning/error/info都会有默认的样式以及图标，当咱们须要展现其余的图标时，咱们只须要设置type为other或者不设置type（默认为other），而后设置key便可。key的话，咱们能够找到lightning design system中的icon的名称赋值便可。

showToast : function(component, event, helper) { var toastEvent = $A.get("e.force:showToast"); toastEvent.setParams({ mode: 'sticky', title: 'Info', type: 'other', key:'like', message: 'test message\ntest multiple lines' }); toastEvent.fire(); }

 二. aura:method

不少内容咱们能够进行公用的组件化操做，好比针对toast的展现（咱们只须要设置方法传递参数，调用便可，不须要每一个component的controller/helper js方法都重复的声明Toast的声明以及触发），针对picklist值获取，针对表字段label的获取。制做公用组建须要先了解一个aura封装的组件名称，aura:method。

 咱们在前端正常去进行方法调用一般是绑定一个handler或者执行某个事件从而去调用方法，使用aura:method定义一个方法能够做为组件的API的一部分，这样咱们在client-controller部分能够直接调用此方法。使用aura:method能够设置传入的参数，也能够设置返回的同步或者异步的结果，因此一般咱们可使用aura:method去作共用组建的内容，做为公用组件，使用aura:method去声明，其余的component只须要引入此公用组件便有权限直接调用aura:method声明的方法了。

aura:method总共有如下的属性：

• name： 用来声明方法的名称，后期调用直接使用此方法调用，传递相关的参数便可；
• action：此方法要去调用的client-controller的方法；
• access：public(在相同namespace的component能够调用此方法) / global(在全部的namespace的component能够调用此方法)；
• description：方法描述。

除了以上属性之外，方法还要有参数，使用aura:attribute去声明方法体里的参数项。aura:method能够实现同步以及异步的返回，感兴趣的能够查看细节，下面内容为经过aura:method实现Toast公用组件。

ToastServiceComponent.cmp

<aura:component access="global">
    <ltng:require styles="{!$Resource.multipleLineToastCss}"/>

    <aura:method access="global" name="showToast" action="{!c.showToastAction}">
        <aura:attribute name="message" type="String" description="the body message will show. use \n to break lines" required="true"/>
        <aura:attribute name="displayTitle" type="String" description="the title hearder will show" required="true"/>
        <aura:attribute name="displayType" type="String" description="success/warning/error/info/other"/>
        <aura:attribute name="mode" type="String" description="dismissible/pester/sticky"/>
        <aura:attribute name="key" type="String" description="you can set name from lightning design system icon section"/>
    </aura:method>

</aura:component>

ToastServiceComponentController.js

({ showToastAction : function(component, event, helper) { var params = event.getParam('arguments'); var toastEvent = $A.get("e.force:showToast"); var type = params.displayType; if(params.key) { type = 'other'; } if(!params.mode) { params.mode = 'dismissible'; } toastEvent.setParams({ "title": params.displayTitle, "message": params.message, "type": type, "mode":params.mode, "key": params.key }); toastEvent.fire(); } })

接下来是调用：

SimpleToastDemo.cmp：须要引入ToastServiceComponent，设置一个local id

<aura:component implements="flexipage:availableForAllPageTypes">
    <c:ToastServiceComponent aura:id="toastService"/>
    <lightning:button variant="brand" label="show toast" onclick="{!c.showToastHandler}"/>
</aura:component>

SimpleToastDemoController.js： find到aura:id，而后调用方法便可。

({ showToastHandler : function(component, event, helper) { var toastService = component.find('toastService'); toastService.showToast('this is a toast demo\n this can allow multiple lines\nhere we show like icon','simple toast demo','other','dismissible','like') } })

展现以下：

 

 

 总结：篇中简单介绍Toast以及aura:method，详细了解的自行查看文档，感兴趣的最好了解一下 lightning:overlayLibrary以及lightning:notificationsLibrary。篇中有错误的地方欢迎指出，有不懂的欢迎留言。

原文出处：https://www.cnblogs.com/zero-zyq/p/11823411.html