Message Icon 跳变

[closertb]

问题描述

由于在Message组件中, iconType 使用了setData 来设置，所以当设置type 为非success 时，会出现icon 跳变，从默认的check_ 变为我们的设置值

  <am-icon className="am-icon icon-{{type}}" type="{{iconType}}" />

var TYPE_MAP = {
  success: 'check_',
  fail: 'close_',
  cancel: 'close_',
  info: 'help_',
  warn: 'warn_',
  waiting: 'time-5_'
};

onInit: function onInit() {
    this.setType(this.props.type);
  }

setType: function setType(type) {
      var realType = TYPE_MAP[type] || 'check_';
      this.setData({
        iconType: realType
      });
    }

复现步骤

message type设置为warn, 电脑反应速度低一些，即可看见icon 跳变

现在我们项目组是采用hack 的方式，将TYPE_MAP设置在了props 中，然后直接用js 对象的计算数据来做：

<am-icon className="am-icon icon-{{type}}" type="{{TYPE_MAP[type] || 'check_'}}" />

期待有更好的方式修复

demo 示例

无

截图

无

预期行为

环境信息

• mini-ali-ui （px 版本扩展组件）
• mini-ali-ui-rpx （rpx 版本扩展组件）

• 组件库版本：
• 设备机型：
• 设备版本：
• APP： 支付宝小程序