Salesforce Aura 切换输入 - HTML

简介

Salesforce Aura 是一种 JavaScript 框架，用于在 Salesforce 平台中构建单页应用程序。与 Apex 和 Visualforce 相比，Aura 允许开发人员使用先进的 CSS、JavaScript 和 HTML 技术编写高度可定制的用户界面。

本文将介绍如何使用 Aura 编写 HTML 输入切换器。

步骤

1. 创建一个名为 InputSwitcher.cmp 的组件。

<!-- InputSwitcher.cmp -->

<aura:component>
    <aura:attribute name="inputs" type="String[]" default="['Text', 'Number', 'Date']" />
    <aura:attribute name="value" type="String" />
    <aura:registerEvent name="valueChange" type="c:InputChangeEvent" />
    
    <div class="slds-form-control">
        <lightning:radioGroup name="input"
                              options="{!v.inputs}"
                              value="{!v.value}"
                              onchange="{!c.handleChange}" />
    </div>
</aura:component>

2. 创建名为 InputChangeEvent 的应用事件。

// InputChangeEvent.evt

<aura:event type="APPLICATION">
    <aura:attribute name="value" type="String" />
</aura:event>

3. 创建名为 InputSwitcherController.js 的控制器，并添加 handleChange 方法。

// InputSwitcherController.js

({
    handleChange: function(component, event, helper) {
        var value = event.getSource().get("v.value");
        component.set("v.value", value);
        
        var valueChangeEvent = component.getEvent("valueChange");
        valueChangeEvent.setParams({ "value": value });
        valueChangeEvent.fire();
    }
})

4. 在需要使用 InputSwitcher 输入组件的父组件中使用 InputSwitcher 组件。

<!-- ParentComponent.cmp -->

<aura:component>
    <aura:attribute name="selectedInput" type="String" />
    
    <c:InputSwitcher value="{!v.selectedInput}" onvaluechange="{!c.handleInputChange}" />
</aura:component>

// ParentComponentController.js

({
    handleInputChange: function(component, event, helper) {
        var selectedInput = event.getParam("value");
        component.set("v.selectedInput", selectedInput);
    }
})

结论

使用 Aura 可以轻松创建可定制的输入切换器，从而提高应用程序的可用性和易用性。本文提供了一个示例组件和控制器，以帮助开发人员快速入门。