SaltUI 3.0 升级指南

[eternalsky]

文件变化

• 重复的文件进行了合并
• JS 只剩下：salt-ui.js, salt-ui.min.js
• CSS 只剩下：salt-ui.css（橙色）, salt-ui.min.css（橙色），dd.css（钉钉蓝），dd. min.css（钉钉蓝）

IconSource/Icon

• 移除
• 【推荐】项目中引入 svgICon，可以使用 salt-svg-loader 配合 webpack 来引入，我们在 salt-svg-loader 中做了大量的工作，保证你在使用中以最小的成本，兼容最大程度的浏览器。
• 【推荐】同时，SaltUI 也提供了自己的一个常用图标库 salt-icon，也可以直接使用。
• 【不推荐】如果您仍然习惯 Symbol 的使用方式（这种方式会带来一些浏览器兼容性问题），但需要您自己插入对应的 symbol。

import Icon from ' salt-icon/dist/Symbol';

render() {
    return <Icon name='icon-name'/>
}

Tab

• 删除了 scroll/showScroll，
• 删除了 pendant
• 新的交互方式，会自动调整 tab 的展示，以上参数都用不到了

SearchBar

• 该组件本身不再支持历史等，仅保留搜索框
• 抽出了一个子组件 WithContainer，保留原来的使用方式，即等同于原来的 SearchBar，可平滑替换如下：

<SearchBar.WithContainer
  onSearch={(value)=> {
    console.info(`Do search>>${value}`);
  }}
>
  {this.renderSearchResult()}
</SearchBar.WithContainer>

Calendar

• 仅保留日历面板，支持选择单个日期、日期区间

• 移除了如下功能：

  • Calendar.MonthCalendar：
    • 如果想选择月份，请换用 Datetime/DatetimeField 组件；
    • 如果想选择月份区间，请换用 CalendarField 组件；
  • Calendar.YearCalend：
    • 如果想选择年份，请换用 Datetime/DatetimeField 组件；
    • 如果想选择年份区间，请换用 CalendarField 组件；

• 还移除了：

  • showTopPanel：viewMode 为 popup 时，就会出现 topPanel，不再设置
  • extraClass
  • onMaskClick（请换用maskClosable和onMaskClose）
  • onTitleClick
  • calendarCode，原来的作用是渲染行程等信息，可使用 renderCustomDayLabel() 替代
  • onSelecting：请换用 onChange

• 其它，请看下面的 history

CalerdarField

• 依赖 Calendar 及 Datetime
• type 可选值在原来 year, month, day(面板形式) 的基础上扩充了另外三个：dayWithSlot(拨盘形式), dayWithHalf（提供上下午选择）, dayWithTime（提供时分选择）

DatetimeField

• 从其中提取出了 Datetime，作为一个新组件，可提高复用性。

Breaking Changes

• value：
  • 增加了object类型支持，使用timeType字段表示上/下午
  • 取消了字符串类型
• columns 不再支持展示列自由组合，改为以 DatetimeField.YMD 等常量形式给出，详见 readme
• onSelect 参数改为对象，value 字段表示时间戳，timeType 字段表示上/下午

ScrollList

Breaking Changes

• 删除

  • 不再依赖 iscroll
  • pushLoadTip
  • cache
  • clearCache 方法

• 增加

  • refreshing
  • loading
  • noMore

• 运行机制变动

  • 使用 tingle-scroll-view 封装实现，去除了 iscroll 的依赖
  • 底部加载的交互方式从手动上拉加载更换为触底自动加载
  • onLoad 回调分解为两个方法：onRefresh 和 onLoad。分别对应下拉刷新和触底加载的回调。

• 注意事项

  • 新版本的 dom 结构和 class 名称有变化，做了自定义样式的同学需要验证一下新版本的展示是否正确
  • onLoad的使用方式有变化，分解为了 onRefresh 和 onLoad

Note

• 删除
• 请使用 NoticeBar 替代
• type可选值移除message，用info替换，另外还支持 'success','error','warning'
• 移除closable、closeText，换用 optionsType

Box

改为 Boxs

[WangYang-Rex]

给力，终于出来了，试试看

[eternalsky]

@WangYang-Rex 有问题可以随时在这里反馈，也可以 star 我们获取第一手更新资料。

[WangYang-Rex]

@eternalsky 目前支持按需加载么，现在直接引入有1M

[eternalsky]

@WangYang-Rex 请查看 ReamME 文档。

[WangYang-Rex]

嗯，看到了~~~~

[eternalsky]

原 2.x 文档：http://g.alicdn.com/platform/tingle-ui/2.2.3/docs/docs.html#tingle-ui