模态之上的Salesforce Aura Spinner

Salesforce Aura框架提供了多个UI组件，其中一个非常有用的组件是“Spinner”，它用于显示数据加载状态。但是，这个组件只能在模态框中使用，这就限制了它的使用场景。本篇文章将为程序员介绍如何在模态之上使用Salesforce Aura Spinner。

使用Conditional Rendering

使用条件渲染语法是一种常见的方法，用于在模态框之上显示Spinner。在这种方法中，我们使用slds-spinner组件来创建一个自定义的Spinner。然后，我们将Spinner覆盖在主要的内容上，并使用条件渲染来控制Spinner何时显示。下面是一个示例代码片段：

<!-- spinner component -->
<aura:component description="Spinner">
    <div class="slds-spinner_container">
        <div class="slds-spinner slds-spinner_brand slds-spinner_large">
            <div class="slds-spinner__dot-a"></div>
            <div class="slds-spinner__dot-b"></div>
        </div>
    </div>
</aura:component>

<!-- main component -->
<aura:component>
    <aura:attribute name="showSpinner" type="Boolean" default="false"/>
    <div class="slds-modal__content">
        <!-- content goes here -->
        <aura:if isTrue="{!v.showSpinner}">
            <c:Spinner/>
        </aura:if>
    </div>
</aura:component>

在此示例中，我们创建了一个名为“Spinner”的组件，并使用了SLDS样式库中的Spinner组件。在主要的Aura组件中，我们具有一个名称为“showSpinner”的属性，用于控制Spinner何时显示。我们使用了Aura的“aura:if”指令来检查“showSpinner”属性是否为true。如果是，我们将显示自定义的Spinner组件。否则，我们将不显示Spinner。

使用Lightning Events

另一种在模态之上使用Salesforce Aura Spinner的方法是使用Lightning事件。这种方法可以帮助我们更好地掌控Spinner，并在需要时自动显示和隐藏它。下面是一个示例代码片段：

<!-- spinner component -->
<aura:component description="Spinner">
    <div class="slds-spinner_container">
        <div class="slds-spinner slds-spinner_brand slds-spinner_large">
            <div class="slds-spinner__dot-a"></div>
            <div class="slds-spinner__dot-b"></div>
        </div>
    </div>
</aura:component>

<!-- parent component -->
<aura:component>
    <aura:attribute name="showSpinner" type="Boolean" default="false"/>
    <aura:handler name="toggleSpinner" event="c:ToggleSpinnerEvent" action="{!c.handleToggleSpinner}"/>
    <div class="slds-modal__content">
        <!-- content goes here -->
        <aura:if isTrue="{!v.showSpinner}">
            <c:Spinner/>
        </aura:if>
    </div>
</aura:component>

<!-- toggle spinner event -->
<aura:event type="APPLICATION" description="Event to toggle spinner on/off">
    <aura:attribute name="showSpinner" type="Boolean" required="true"/>
</aura:event>

<!-- parent controller -->
({
    handleToggleSpinner: function(component, event, helper) {
        component.set("v.showSpinner", event.getParam("showSpinner"));
    }
})

<!-- child component controller -->
({
    toggleSpinner: function(component, event, helper) {
        var toggleSpinnerEvent = component.getEvent("toggleSpinner");
        toggleSpinnerEvent.setParams({ "showSpinner": true });
        toggleSpinnerEvent.fire();
    }
})

在此示例中，我们创建了一个名为“Spinner”的组件，并使用了SLDS样式库中的Spinner组件。在主要的Aura组件中，我们具有一个名称为“showSpinner”的属性，用于控制Spinner何时显示。我们还创建了一个名为“ToggleSpinnerEvent”的Lightning事件，其目的是在需要时切换Spinner的状态。

在父组件的控制器中，我们使用“handleToggleSpinner”函数来捕获该事件，然后使用子组件中的“toggleSpinner”函数来触发该事件。当触发“toggleSpinner”函数时，我们设置“showSpinner”属性为true，并在父组件中显示Spinner。如果事件参数包含“showSpinner”属性的false值，则Spinner将被隐藏。

以上是两种在模态之上使用Salesforce Aura Spinner的方法。您可以根据自己的需求和喜好来选择其中的一种。这些方法都可以帮助您更好地控制Spinner，并为用户提供更好的用户体验。