• 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);
    }
  • 相关阅读:
    exploded archive 和packaged archive 区别
    MyEclipse6.5使用设置技巧及快捷键
    本机上设置域名解析
    Cookie的生命周期问题
    简单的函数柯里化
    cookie操作
    自定义事件
    解耦应用逻辑/事件处理程序
    dragdrop + 自定义事件
    在窃取函数中用作用域安全的构造函数
  • 原文地址:https://www.cnblogs.com/pipidan/p/10557729.html
Copyright © 2020-2023  润新知