腾讯企业级设计体系 TDesign 发布 2022.4 第二周更新
TDesign 是一款诞生于腾讯内部、拥有完整的设计价值观和视觉风格指南的企业级设计体系,同时提供了丰富的设计资源,在设计体系基础上产出基于 Vue、React、小程序等业界主流技术栈的组件库解决方案,适合用于构建设计统一/多端覆盖/跨技术栈的企业级前端应用。
目前,TDesign 发布了 2022 年 4 月的第二周更新,带来如下变更:
组件库
Vue2 for Web 发布 0.40.2 版
🐞 Bug Fixes
Form:修复FormItem slot label未正常占位的问题Slider: 修复设置inputnumberProps属性无效的问题Upload:- 修复
remove、selectChange时间回调异常的问题 - 修复取消上传逻辑异常
- 修复
🌈 Features
Popup:content尺寸变化后自动更新位置Slider:label为function时新增value和position参数Upload:- 支持自定义上传文件列表
- 列表型上传支持展示
errorMessage
Checkbox:onChange事件新增参数option表示当前操作对象,current表示当前操作对象的valueTable:- 表格拖拽排序支持完全受控用法
- 列配置功能,
onColumnChange事件新增参数e和currentColumn - 列配置功能,新增
buttonProps,用于支持完全自定义「列配置按钮」风格和内容 - 列配置功能,新增
placement,用于控制「列配置按钮 」相对于表格组件的位置,可选值:左上角、右上角、左下角、右下角 - 列配置功能,新增控制列配置弹窗显示或隐藏属性
columnControllerVisible和onColumnControllerVisibleChange,将主要应用于完全需要自定义列配置按钮的业务场景 BaseTable/Primary/Table/EnhancedTable新增bottomContent,用于设置表格底部内容- 修复当数据量过少时,过滤浮层被隐藏的问题,修复 Safari 浏览器无法显示省略浮层问题
- 树形结构中,新增
toggleExpandData,用于控制行展开 - 树形结构中,无法获取到正确的
rowKey时,抛出错误,提醒用户修改 table-layout:fixed模式,且内容超出时,设置默认列宽为100,避免出现列宽为0消失的情况- 即使没有行选中列,依然支持
selectedRowKeys添加类名 - 行选中和行类名透传,同时存在时,自定义行类名透传失效问题
- 修复
tfoot>tr类名透传失效问题
详情见:https://github.com/Tencent/tdesign-vue/releases/tag/0.40.2
Vue3 for Web 发布 0.12.0 版
⚠️BREAKING CHANGES
- 重构
Table为Composition API,存在不兼容更新BaseTable HTML结构变更,写过CSS样式覆盖的同学需注意更新样式。由之前的两个table分别渲染thead和tbody,更为一个table- 行拖拽排序功能,使用方法有调整,从
sortOnRowDraggable更为dragSort='col' - 表头更为使用 th 标签,之前为 td,不符合语义
- 事件
row-db-click更为row-dblclick,onRowDbClick更为rowDblclick - 事件
row-hover更为row-mouseover,onRowHover更为onRowMouseover CSS类名t-table__row-first-full-row更为t-table__first-full-row,t-table__row-last-full-row更为t-table__last-full-row
🐞 Bug Fixes
- 修复
configProvider警告 和globalConfig数据响应式问题 - 修复
Input type=password时autocomplete警告 以及toggle password问题 - 修复
Checkbox Group插槽形式disabled属性没有生效 - 修复
Upload中triggerUpload方法未正确导出 和 自定义拖拽上传 demo 中 “点击上传” 按钮无效 修复Slider inputNumberProps未正常透传 - 修复
Affix onFixedChange触发时机,在固定状态发生变化时才会触发该事件(改动之前为:滚动一直触发) - 修复
Table的 若干 Bug
🌈 Features
- 新增
Collapse组件,使用Composition api - 新增
Message的fadeInandfadeOut animation - 新增
color-picker渐变预览,改进最近使用色交互 - 新增
Table特性- 排序交互变更:排序方式支持点击直接排序
- 优化表格最后一列
ellipsis浮层位置底部右对齐 - 新增超出省略功能,
ellipsis支持透传Popup组件全部属性 - 新增表尾合计行,支持固定在底部,支持多行合计,支持完全自定义内容
- 新增
loadingProps透传加载组件全部特性 - 新增固定行(冻结行)
- 新增排序图标自定义,插槽
(slot='filterIcon')和渲染函数(props.filterIcon)均可 - 新增全局配置:过滤图标、空元素、异步加载文本配置、排序按钮文本配置
- 新增
scroll滚动事件 - 新增表头吸顶功能
- 新增综合功能:多级表头 + 固定表头 + 固定列 + 表头吸顶 + 虚拟滚动 + 自定义列配置
- 过滤功能,条件为真时,高亮筛选图标
- 新增列拖拽排序功能,通过拖拽手柄调整表格排序
React for Web 发布 0.30.2 版
🐞 Bug Fixes
Cascader: 修复定制数据字段别名label不展示问题Form: 兼容FormItem单独使用报错问题Table:- 修复
table高度问题 - 修复
table className ts类型丢失
- 修复
Upload: 修复多图片上传时defaultFiles造成上传进度错误Slider: 兼容不传value场景
🌈 Features
Breadcrumb: 增加自定义children时对separator的支持Popconfirm: 调整组件导出命名
Miniprogram for WeChat 发布 0.7.3 版
🐞 Bug Fixes
Cell: 修复传入String类型的right-icon不生效的问题Tabs: 属性label支持slotDialog: 完善close事件返回的参数- 受控优化:支持不传值时默认为非受控用法
🌈 Features
- 新增组件:
Collapse折叠面板Progress进度条
Picker: 新增属性header以及header和footer的插槽DateTimePicker: 新增属性header以及header和footer的插槽
Vue3 for Mobile 发布 0.8.2 版
🐞 Bug Fixes
tabs:label支持动态修改,以及新增支持slot的方式popup: 修复teleport失效问题
解决方案及周边
TDesign Vue Starter 发布 0.1.5 版
🌈 Features
- 多标签
Tab页增加持久化功能 - 内置全局配置组件,支持全局多语言及属性的配置
TDesign Vue Next Starter 发布 0.2.2 版
🐞 Bug Fixes
- 修复图表文字颜色异常
- 修复
mock roles模块错误
🌈 Features
- 支持多标签页支持持久化
- 升级组件库依赖 tdesign-vue-next 至 0.11 版本
TDesign React Starter 发布 0.1.2 版
🐞 Bug Fixes
- 修复构建产物丢失
CSS Token的问题 - 修复图表文字重叠的问题
更新公告:https://github.com/Tencent/tdesign/releases/tag/v.2022.4.10