使用CustomData动态改变控件颜色
有时候我们需要改变控件颜色,对于高度封装的控件,显然改变控件CSS是比较困难的,幸好SAP UI5预设了一个customData的属性,每个控件都能使用她。
如下代码是判断汇率是否有改变,如果改变了,那么改变Input的颜色。
使用CustomData属性之后,对应的控件渲染后,控件属性会自动生成data-****属性,我们可以根据该属性操作css。
代码如下:
当Ukurs 不等于 UkursOld时自动改变控件颜色为红色。需要注意必须使用writeToDom=true
xx.view.xml
<t:Column hAlign="Center" width="9rem"><m:Label required="true" text="汇率" /><t:template><m:Input required="true" value="{path: 'globalModel>Ukurs'}" ><m:customData><core:CustomData key="diff" value="{= Number(${globalModel>Ukurs}) === Number(${globalModel>UkursOld}) ? '' : 'R' }" writeToDom="true"/></m:customData> </m:Input></t:template>
</t:Column>
stype.css
注意data-key
[data-diff="R"] input{color: #bb0000;
}