Lightning Component 控制样式显示隐藏的两种方式;

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);
}

猜你喜欢

转载自www.cnblogs.com/pipidan/p/10557729.html
今日推荐