zoukankan      html  css  js  c++  java
  • 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);
    }
  • 相关阅读:
    WUSTOJ 1232: 矩阵乘法(C)
    JDBC(Java项目使用Oracle数据库)
    1187: 零起点学算法94——今年暑假不AC(Java)
    1223: 输出汉诺塔问题的盘子移动步骤(Java)
    软件设计师真题及解析
    Eclipse常用快捷键
    1205: 求一元二次方程的实数根(C)
    1204: 移位运算(C)
    1192: 零起点学算法99——The sum problem(C)
    1186: 零起点学算法93——改革春风吹满地(C)
  • 原文地址:https://www.cnblogs.com/pipidan/p/10557729.html
Copyright © 2011-2022 走看看