• 2.0.0 Carbon
    • 新特性
    • 修复
    • 非兼容性更新

    2.0.0 Carbon

    2017-10-27

    新特性

    • 综合
      • 新增 theme-chalk 主题
      • 增强以下组件的可访问性:Alert、AutoComplete、Breadcrumb、Button、Checkbox、Collapse、Input、InputNumber、Menu、Progress、Radio、Rate、Slider、Switch 和 Upload
      • 新增布局组件 Container、Header、Aside、Main 和 Footer
      • 新增 TypeScript 类型声明
      • 重绘了全部图标,并新增了部分图标
      • 新增了一系列基于断点的工具类,用于当视口尺寸满足一定条件时隐藏元素
      • 新增全局配置组件尺寸的功能。在引入 Element 时,配置 size 字段可以改变所有组件的默认尺寸
    • Button
      • 新增 round 属性,用于圆角按钮 #6643
    • TimeSelect
      • 可以用 UpDown 导航,用 Enter 选中时间 #6023
    • TimePicker
      • 可以用方向键导航,用 Enter 选中时间 #6050
      • 新增 start-placeholderend-placeholder,用于设置范围选择时两个输入框的占位符 #7169
      • 新增 arrow-control 属性,提供另一种交互形式,#7438
    • Tree
      • 子节点在首次被展开之前不进行渲染 #6257
      • 新增 check-descendants 属性,设置 lazy 模式下勾选节点时,是否完全展开整个子树 #6235
    • Tag
      • 新增 size 属性 #7203
    • Datepicker
      • type 为 datetimerange 时可以使用 timeFormat 格式化时间选择器 #6052
      • 新增 start-placeholderend-placeholder,用于设置范围选择时两个输入框的占位符 #7169
      • 新增 value-format 属性,支持对绑定值的格式进行自定义,#7367
      • 新增 unlink-panels 属性,用于在选择日期范围时取消两个日期面板之间的联动
    • MessageBox
      • 新增 closeOnHashChange 属性 #6043
      • 新增 center 属性,提供居中布局 #7029
      • 新增 roundButton 属性,使得内部按钮为圆角按钮 #7029
      • 新增 dangerouslyUseHTMLString 属性,使得 message 支持传入 HTML 字符串*#6043
      • 新增 inputType 属性,用户指定内部输入框的类型,#7651
    • Dialog
      • 新增 widthfullscreenappend-to-body 属性,支持嵌套使用
      • 新增 center 属性,提供居中布局 #7042
      • 新增 focus-after-closedfocus-after-open属性,支持无障碍访问 #6511
    • ColorPicker
      • 增加手动输入色值的支持 #6167
      • 新增 size 属性,用于控制组件的大小 #7026
      • 新增 disabled 属性,用于禁用组件 #7026
      • 新增 popper-class 属性,#7351
    • Message
      • 图标部分使用 icon 代替图片,从而支持通过 CSS 修改图标背景色 #6207
      • 新增 dangerouslyUseHTMLString 属性,使得 message 属性支持传入 HTML 字符串*#6207
      • 新增 center 属性,提供居中布局 #6875
    • Notification
      • 新增 position 属性,用于配置 Notification 出现的位置 #6231
      • 新增 dangerouslyUseHTMLString 属性,使得 message 属性支持传入 HTML 字符串*#6231
      • 新增 showClose 属性,用于隐藏关闭按钮 #6402
    • Rate
      • 新增 show-score 属性,控制是否在右侧显示当前分数 #6295
    • Tabs
      • 新增 tab-position 属性,控制选项面板内容显示的上、下、左、右四个方向 #6096
    • Radio
      • 增加 border 属性和 size 属性 #6690
    • Checkbox
      • 增加 border 属性和 size 属性 #6690
    • Alert
      • 新增 center 属性,提供居中布局 #6876
    • Menu
      • 新增 background-colortext-coloractive-text-color 属性,分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色 #7064
      • 新增 openclose 方法,支持手动打开和关闭 SubMenu,#7412
    • Form
      • 新增 inline-message 属性,设置后校验信息会以行内样式显示 #7032
      • 新增 status-icon 属性,用于在输入框中显示校验结果反馈图标 #7032
      • Form 和 FormItem 新增 size 属性,用于控制表单内组件的尺寸,#7428
      • validate 方法在不传入 callback 的情况下返回 promise,#7405
      • 新增 clearValidate 方法,用于清空所有表单项的验证信息,#7623
    • Input
      • 新增 suffixprefix 的 slot,以及 suffixIconprefixIcon 属性,用于给输入框内部增加前置和后置内容 #7032
    • Breadcrumb
      • 新增 separator-class 属性,可使用图标作为分隔符 #7203
    • Steps
      • 新增 simple 属性,用于开启简洁风格的步骤条 #7274
    • Pagination
      • 新增 prev-textnext-text 属性,用于自定义上一页和下一页的文本 #7005
    • Loading
      • 配置对象新增 spinnerbackground 字段,支持自定义加载图标和背景色,#7390
    • Autocomplete
      • 新增 debounce 属性,#7413
    • Upload
      • 新增 limiton-exceed 属性,支持对上传文件的个数进行限制,#7405
    • DateTimePicker
      • 新增 time-arrow-control 属性,用于开启时间选择器的 arrow-control,#7438
    • Layout
      • 新增断点 xl,适用于宽度大于 1920px 的视口
    • Table
      • 新增 span-method 属性,用于合并行或列
      • 新增 clearSort 方法,用于清空排序状态
      • 新增 clearFilter 方法,用于清空过滤状态
      • 对于可展开行,当该行展开时会获得一个 .expanded 类名,方便自定义样式
      • 新增 size 属性,用于控制表格尺寸
      • 新增 toggleRowExpansion 方法,用于手动展开或关闭行
      • 新增 cell-class-name 属性,用于指定单元格的类名
      • 新增 cell-style 属性,用于指定单元格的样式
      • 新增 header-row-class-name 属性,用于指定表头行的类名
      • 新增 header-row-style 属性,用于指定表头行的样式
      • 新增 header-cell-class-name 属性,用于指定表头单元格的类名
      • 新增 header-cell-style 属性,用于指定表头单元格的样式
      • TableColumn 的 prop 属性支持 object[key] 格式
      • TableColumn 新增 index 属性,用于自定义索引值
    • Select
      • 新增 reserve-keyword 属性,用于在选择某个选项后保留当前的搜索关键词

    修复

    • DatePicker
      • 选择周数时,v-model 结果返回该周第二天的问题 #6038
      • daterange 类型中,第一次的输入会被清空的问题 #6021
    • DateTimePicker
      • 和 TimePicker 相互影响的问题 #6090
      • 选择时间小时和秒可超出限制的问题 #6076
    • TimePicker
      • 失去焦点时无法正确改变 v-model 值的问题 #6023
    • Dialog
      • 当含有下拉框时,下拉框的打开和关闭会造成文字虚晃的问题 #6088
    • Select
      • 提升性能,修复组件销毁时可能导致 Vue dev-tool 卡死的问题 #6151
    • Table
      • 修复 Table 在父元素从 display: none 变成其他状态时会隐藏的问题
      • 修复 Table 在父元素为 display: flex 时可能出现的宽度逐渐变大的问题
      • 修复 append 具名 slot 和固定列并存时,动态获取表格数据会导致固定列消失的问题
      • 修复 expand-row-keys 属性初始化无效的问题
      • 修复 data 改变时过滤条件失效的问题
      • 修复多级表头时固定列隐藏情况计算错误的问题
      • 修复 max-height 变更后无法恢复的问题
      • 修复一些样式上的计算错误

    非兼容性更新

    • 综合
      • 移除 theme-default
      • 最低兼容 Vue 2.5.2 和 IE 10
      • 表单组件的 change 事件和 Pagination 的 current-change 事件现在仅响应用户交互
      • Button 和表单组件的 size 属性现在可接受 mediumsmallmini
      • 为了方便使用第三方图标,Button 的 icon 属性、Input 的 prefix-iconsuffix-icon 属性、Steps 的 icon 属性现在需要传入完整的图标类名
    • Dialog
      • 移除 size 属性。现在 Dialog 的尺寸由 widthfullscreen 控制
      • 移除通过 v-model 控制 Dialog 显示和隐藏的功能
    • Rate
      • text-template 属性更名为 score-template
    • Dropdown
      • menu-align 属性变更为 placement,增加更多方位属性
    • Transfer
      • footer-format 属性更名为 format
    • Switch
      • 由于 on- 属性在 JSX 中会被识别为事件,导致 Switch 所有 on- 属性在 JSX 中无法正常工作,所以 on- 属性更名为 active-,对应地,off- 属性更名为 inactive-。受到影响的属性有:on-icon-classoff-icon-classon-textoff-texton-coloroff-coloron-valueoff-value
      • active-textinactive-text 属性不再有默认值
    • Tag
      • type 属性现在支持 successinfowarningdanger 四个值
    • Menu
      • 移除 theme 属性。现在通过 background-colortext-coloractive-text-color 属性进行颜色的自定义
    • Input
      • 移除 icon 属性。现在通过 suffix-icon 属性或者 suffix 具名 slot 来加入尾部图标
      • 移除 on-icon-click 属性和 click 事件。现在如果需要为输入框中的图标添加点击事件,请以具名 slot 的方式添加图标
      • change 事件现在仅在输入框失去焦点或用户按下回车时触发,与原生 input 元素一致。如果需要实时响应用户的输入,可以使用 input 事件
    • Autocomplete
      • 移除 custom-item 属性。现在通过 scoped slot 自定义输入建议列表项的内容
      • 移除 props 属性,现在使用 value-key 属性指定输入建议对象中用于显示的键名
    • Steps
      • 移除 center 属性
      • 现在步骤条将默认充满父容器
    • DatePicker
      • change 事件参数现在为组件的绑定值,格式由 value-format 控制
    • Table
      • 移除通过 inline-template 自定义列模板的功能
      • sort-method 现在和 Array.sort 保持一致的逻辑,要求返回一个数字
      • append slot 移至 tbody 元素以外,以保证其只被渲染一次
      • expand 事件更名为 expand-change,以保证 API 的命名一致性
      • row-class-namerow-style 的函数参数改为对象,以保证 API 的一致性

    在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。因此请在 dangerouslyUseHTMLString 打开的情况下,确保 message 的内容是可信的,*永远不要将用户提交的内容赋值给 message 属性。