1.使用Component js方法: $A.util.removeClass 和 $A.util.addClass 调用Css样式,从而改变组件样式
<aura:component> <div class="css_SearchDiv" style="background-size:cover;background-position: center; background-image: url(https://kk--kksandbox--c.cs6.visual.force.com/resource/1549939044000/BackgroundLogo);" > <div class="SearchDiv"> <ui:inputText class="SearchInput" value="{!v.InputValue}" aura:id="SearchInput" keyup="{!c.keyDown}"/> <button class="reset" onclick="{!c.removeAction}" type="button">✖</button> <lightning:buttonMenu class="SearchMenu" aura:id="SearchbuttonMenu" onselect="{!c.handleSelect }" alternativeText="Show menu" label="{!v.Pro_Name}" iconName="utility:down"> <lightning:menuItem label="所有产品" value="所有产品" /> <aura:iteration items="{!v.ProductList}" var="pro_list"> <lightning:menuItem label="{!pro_list.Label}" value="{!pro_list.Label}" /> </aura:iteration> </lightning:buttonMenu> <lightning:button onclick="{!c.SearchAction}" class="Searchbutton" iconName="utility:search" /> </div> </div>
<lightning:button onclick="{!c.ErrorMethod }" class="Searchbutton" iconName="utility:search" />
</aura:component>
ErrorMethod : function(component, event) { var cmpSarchInput = component.find('SearchInput'); $A.util.removeClass(cmpSarchInput, 'addSarchStyle'); }
.THIS .addSarchStyle{
width:432px; }
2.使用标准的<aura:if> isTrue 如果等于 true 就展示所包括的内容
<aura:component>
<aura:attribute name="loaded" type="Boolean" default="false" />
<lightning:button onclick="{!c.SearchMethod }" class="Searchbutton" iconName="utility:search" />
<aura:if isTrue="{!v.loaded }"> <lightning:spinner variant="brand" size="large" alternativeText="Loading" class="exampleHolder"/> </aura:if>
</aura:component>
/*******************************************************************************************************************************************/
<aura:component> <aura:if isTrue="{!v.truthy}"> True <aura:set attribute="else"> False </aura:set> </aura:if> </aura:component>
js:
SearchMethod : function(component, event, helper) { component.set("v.loaded",true); }