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。篇中有錯誤的地方歡迎指出，有不懂的歡迎留言。