Salesforce LWC學習(三十一) Quick Action適配

本篇參考：https://www.lightningdesignsystem.com/components/modals/

隨着salesforce lwc的優化，愈來愈多的項目從aura轉到了lwc開發，沒有lwc的知識是不能的，可是期望lwc能夠搞定全部的場景是萬萬不能的，好比今天的場景，quick action。目前 quick action只容許選擇 Aura Component，因此咱們開發 quick action基本操做是 aura 套着 lwc實現功能。那如何更好的適配UI，本篇淺入淺出，作一些特定場景的demo，以便有需求的小夥伴能夠快速參考上手。先來一個簡單的demo。

quickActionLwcAdjustment.html

<template>
    this is a component build by LWC
</template>

testQuickActionForLWC.cmp

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,flexipage:availableForRecordHome,lightning:actionOverride">
    <aura:attribute name="recordId" type="Id"/>
    <c:quickActionLwcAdjustment/>
</aura:component>

將這個aura component配在 quick action中，咱們demo中放在了account裏面

 

 展現效果：

 嗯，實現了，目測沒啥問題。可是總覺怪怪的，由於彈出的 Modal沒有header，沒有footer，可是大部分彈出的須要這些內容，因此，OK，咱們繼續往下探索，加一下header 以及 footer，demo中 header / footer放在lwc中。

1.0版改動嘗試

quickActionLwcAdjustment.html

<template>
    <div class="slds-modal slds-fade-in-open" style="width: 100%;">
        <div class="slds-modal__container" style="width:100%;">
            <header class="slds-modal__header">
                <h2 class="title slds-text-heading--medium slds-hyphenate">header title section</h2>
            </header>
            <div class="slds-modal__content slds-p-around--medium">
                <lightning-card style="text-align:center;">
                    <p class="title slds-text-heading--medium slds-hyphenate">this is a component build by LWC</p>
                </lightning-card>
            </div>

            <div class="slds-modal__footer">
                <lightning-button onclick={handleOKClick} variant="brand" label="OK" class="slds-m-right_x-small slds-no-flex text-right slds-float--right"></lightning-button>
            </div>
        </div>
    </div>
</template>

quickActionLwcAdjustment.js

import { LightningElement } from 'lwc';

export default class QuickActionLwcAdjustment extends LightningElement {
    handleOKClick(event) {
        this.dispatchEvent(new CustomEvent('closemodal'));
    }
}

testQuickActionFowLWC.cmp

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,flexipage:availableForRecordHome,lightning:actionOverride">
    <aura:attribute name="recordId" type="Id"/>
    <c:quickActionLwcAdjustment onclosemodal="{!c.refreshAndCloseModal}"/>
</aura:component>

testQuickActionForLWCController.js

({
    refreshAndCloseModal : function(component, event, helper) {
        $A.get('e.force:refreshView').fire();
        $A.get("e.force:closeQuickAction").fire();
    }
})

效果展現：

儘管還有點醜，可是雛形出來了，作一下適配。

2.0版改動嘗試

testQuickActionForLWC上面加一下的樣式

<aura:html tag="style">
        .slds-modal__content {
            height:unset !important;
            max-height:unset !important;
        }
</aura:html>

儘管總體效果挺好，可是關閉的按鈕卻沒有頂上去，因此無法做爲最終版本，咱們經過樣式把關閉按鈕隱藏，使用lwc展現

 3.0版改動嘗試

testQuickActionForLWC.cmp

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,flexipage:availableForRecordHome,lightning:actionOverride">
    <aura:html tag="style">
        .slds-modal__close {
            display: none;
        }

        .slds-modal__content {
            height:unset !important;
            max-height:unset !important;
        }
    </aura:html>
    <aura:attribute name="recordId" type="Id"/>
    <c:quickActionLwcAdjustment onclosemodal="{!c.refreshAndCloseModal}"/>
</aura:component>

quickActionLwcAdjustment.html

<template>
    <div class="slds-modal slds-fade-in-open" style="width: 100%;">
        <div class="slds-modal__container" style="width:100%;">
            <header class="slds-modal__header inner">
                <h2 class="title slds-text-heading--medium slds-hyphenate">header title section</h2>
                <lightning-button-icon class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
                    icon-name="utility:close"  alternative-text="close" title="close" onclick={handleOKClick}>
                </lightning-button-icon>
            </header>
            <div class="slds-modal__content slds-p-around--medium">
                <lightning-card style="text-align:center;">
                    <p class="title slds-text-heading--medium slds-hyphenate">this is a component build by LWC</p>
                </lightning-card>
            </div>

            <div class="slds-modal__footer">
                <lightning-button onclick={handleOKClick} variant="brand" label="OK" class="slds-m-right_x-small slds-no-flex text-right slds-float--right"></lightning-button>
            </div>
        </div>
    </div>
</template>

quickActionLwcAdjustment.css：作一個派生選擇器，先隱藏總體，而後指定css下子樣式展現

.inner .slds-modal__close {
    display: inline !important;
}

顯示效果以下：

總結： 這個demo如今還有瑕疵，quick action展現的關閉按鈕是白色，這個是透明色。本篇拋磚引玉，大神們相似需求如何實現，歡迎留言和討論。篇中有錯誤歡迎指出，有不懂歡迎留言。