Skip to content
主题色
灰色
夜间模式组件大小小(1)中(2)大(3)组件圆角
none
small
medium
large
full
组件缩放90%95%100%105%110%

自定义元素存在两种属性:attributeproperty。所有元素的属性均可以通过property设置,如button.disabled = true,而原始值也可以通过HTML Attribute设置,例如字符串、数字(会尝试将字符串转换为数字)、布尔值(当有属性时为true,无属性时为false),其他类型如对象、数组、函数等,则必须通过property设置。

现代框架一般会智能判断往property赋值还是设置为attribute,我们可以比较轻易地设置复杂类型的值,但如果我们是在HTML中编写呢,使用JS查找再赋值又不够方便,这时我们就可以使用属性转换。

属性转换

通过GlobalStaticConfig.attrTransform可以设置某个组件的某个属性的转换逻辑,也可以设置所有组件某个属性的转换逻辑,例如

ts
GlobalStaticConfig.attrTransform.common.disabled = (val) => val === 'false' ? false : !!val;
GlobalStaticConfig.attrTransform.button.size = (val) => {
  try {
    return JSON.parse(val);
  } finally {
    return val;
  }
}
GlobalStaticConfig.attrTransform['virtual-renderer'].renderer => (val) => new Function('item', val);

属性转换需自行处理非法值和异常,复杂的属性转换会影响性能,尽量避免使用