- 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
- 可以用
Up
、Down
导航,用Enter
选中时间 #6023
- 可以用
- TimePicker
- 可以用方向键导航,用
Enter
选中时间 #6050 - 新增
start-placeholder
和end-placeholder
,用于设置范围选择时两个输入框的占位符 #7169 - 新增
arrow-control
属性,提供另一种交互形式,#7438
- 可以用方向键导航,用
- Tree
- 子节点在首次被展开之前不进行渲染 #6257
- 新增
check-descendants
属性,设置lazy
模式下勾选节点时,是否完全展开整个子树 #6235
- Tag
- 新增
size
属性 #7203
- 新增
- Datepicker
- type 为
datetimerange
时可以使用timeFormat
格式化时间选择器 #6052 - 新增
start-placeholder
和end-placeholder
,用于设置范围选择时两个输入框的占位符 #7169 - 新增
value-format
属性,支持对绑定值的格式进行自定义,#7367 - 新增
unlink-panels
属性,用于在选择日期范围时取消两个日期面板之间的联动
- type 为
- MessageBox
- 新增
closeOnHashChange
属性 #6043 - 新增
center
属性,提供居中布局 #7029 - 新增
roundButton
属性,使得内部按钮为圆角按钮 #7029 - 新增
dangerouslyUseHTMLString
属性,使得message
支持传入 HTML 字符串*#6043 - 新增
inputType
属性,用户指定内部输入框的类型,#7651
- 新增
- Dialog
- 新增
width
、fullscreen
、append-to-body
属性,支持嵌套使用 - 新增
center
属性,提供居中布局 #7042 - 新增
focus-after-closed
、focus-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-color
、text-color
和active-text-color
属性,分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色 #7064 - 新增
open
和close
方法,支持手动打开和关闭 SubMenu,#7412
- 新增
- Form
- 新增
inline-message
属性,设置后校验信息会以行内样式显示 #7032 - 新增
status-icon
属性,用于在输入框中显示校验结果反馈图标 #7032 - Form 和 FormItem 新增
size
属性,用于控制表单内组件的尺寸,#7428 validate
方法在不传入 callback 的情况下返回 promise,#7405- 新增
clearValidate
方法,用于清空所有表单项的验证信息,#7623
- 新增
- Input
- 新增
suffix
、prefix
的 slot,以及suffixIcon
、prefixIcon
属性,用于给输入框内部增加前置和后置内容 #7032
- 新增
- Breadcrumb
- 新增
separator-class
属性,可使用图标作为分隔符 #7203
- 新增
- Steps
- 新增
simple
属性,用于开启简洁风格的步骤条 #7274
- 新增
- Pagination
- 新增
prev-text
和next-text
属性,用于自定义上一页和下一页的文本 #7005
- 新增
- Loading
- 配置对象新增
spinner
和background
字段,支持自定义加载图标和背景色,#7390
- 配置对象新增
- Autocomplete
- 新增
debounce
属性,#7413
- 新增
- Upload
- 新增
limit
和on-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
变更后无法恢复的问题 - 修复一些样式上的计算错误
- 修复 Table 在父元素从
非兼容性更新
- 综合
- 移除
theme-default
- 最低兼容 Vue 2.5.2 和 IE 10
- 表单组件的
change
事件和 Pagination 的current-change
事件现在仅响应用户交互 - Button 和表单组件的
size
属性现在可接受medium
、small
和mini
- 为了方便使用第三方图标,Button 的
icon
属性、Input 的prefix-icon
和suffix-icon
属性、Steps 的icon
属性现在需要传入完整的图标类名
- 移除
- Dialog
- 移除
size
属性。现在 Dialog 的尺寸由width
和fullscreen
控制 - 移除通过
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-class
、off-icon-class
、on-text
、off-text
、on-color
、off-color
、on-value
、off-value
active-text
和inactive-text
属性不再有默认值
- 由于
- Tag
type
属性现在支持success
、info
、warning
和danger
四个值
- Menu
- 移除
theme
属性。现在通过background-color
、text-color
和active-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-name
和row-style
的函数参数改为对象,以保证 API 的一致性
- 移除通过
在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。因此请在 dangerouslyUseHTMLString
打开的情况下,确保 message
的内容是可信的,*永远不要将用户提交的内容赋值给 message
属性。