上海普陀门户网站百度业务范围

使用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;
}