您现在的位置是：首页 > 文章详情

腾讯企业级设计体系 TDesign 发布 2022.7 第一周更新

日期：2022-07-05点击：407收藏

TDesign 是一款诞生于腾讯内部、拥有完整的设计价值观和视觉风格指南的企业级设计体系，同时提供了丰富的设计资源，在设计体系基础上产出基于 Vue、React、小程序等业界主流技术栈的组件库解决方案，适合用于构建设计统一 / 多端覆盖 / 跨技术栈的企业级前端应用。

目前，TDesign 发布了 2022 年 7 月的第一周更新，带来如下变更：

组件库

Vue2 for Web 发布 0.43.2

🌈 Features

Form:
- 添加内置校验方法 whitespace
- 新增校验触发方式 trigger: 'blur' - 现在FormItem.label为 string 类型时， Form.errorMessage 模板中的 ${name} 会被替换为 FormItem.label 属性；当 label 属性为 slot/function 时，${name} 会被替换为 FormItem.name 属性
Table:
- 可编辑单元格，支持编辑组件联动
- 树形结构行选中支持半选状态
- 树形结构，缩进 indent 支持 0

🐞 Bug Fixes

Dialog/Drawer: 修复 closeOnOverlayClick closeOnEscKeydown 默认值导致的无法设置的问题
Drawer: 修复 header 默认值为 undefined 的问题
Dialog: 修复 dialog 滚动失效问题
Form: 修复 number 规则校验不生效的问题
Table:
- 动态数据合并单元格，删除行数据时，未更新合并单元格状态
- 修复自定义筛选组件不显示问题
ColorPicker: 修复颜色选择器样式异常
ConfigProvider: 修复 config-provider 同时存在 provide 和 setup#provide 导致卡顿的性能问题
DatePicker: 修复suffixIcon、clear事件问题

详情见：https://github.com/Tencent/tdesign-vue/releases/tag/0.43.2

Vue3 for Web 发布 0.17.3

🌈 Features

Form: 添加内置校验方法 whitespace
table: 可编辑单元格，支持编辑组件联动
Table: 树形结构支持半选状态
Jumper: 新增 jumper 组件

🐞 Bug Fixes

Table: 表头吸顶显示问题
Table: paginationAffixedBottom 支持配置 Affix 组件全部特性
DatePicker: 修复 Jumper 组件类名错误
Upload: 在每次上传前将错误提示数据重置
RadioGroup: 修复 RadioGroup 多次赋予不存在的值时文字不能正常显示
Dialog: 修复 closeOnOverlayClick closeOnEscKeydown 默认值导致的无法设置的问题
Drawer: 修复 closeOnOverlayClick closeOnEscKeydown 默认值导致的无法设置的问题
DatePicker: 修复日期选择器在表单禁用后还能点击的问题
Tree: getRightData 方法兼容 value 的 alias
Form: 修复不传 form.onSubmit 回调函数导致的 scrollToFirstError 参数失效的问题
DatePicker: 修复 clearble 响应式问题
Dialog: 修复滚动失效问题
Table: 修复动态数据合并元格问题
Table: 修复树形结构设置 indent = 0 无效问题
Slider: 使用 InputNumber 时在使用 range 属性情况下传入 min 或 max 会导致手动输入显示 NaN 问题
Select: 修复多选下换行提前占满一行的问题
Select: 修复 input 高度 height 100% 导致换行高度异常的问题
Pagination: 修复如果页面总数变更后当前页数不变的问题
RangeInput: 修复 rangeinput 样式问题

详情见：https://github.com/Tencent/tdesign-vue-next/releases/tag/0.17.3

React for Web 发布 0.36.2

🌈 Features

Form: 添加内置校验方法 whitespace
Table: 新增 indeterminateSelectedRowKeys ，用于控制选中行半选状态
Table: 可编辑单元格，支持编辑组件联动
Table: 树形结构行选中，支持中层节点半选状态
Table: EnhancedTable 新增对外实例对象 treeDataMap
Cascader: 增加 popupVisible, readonly, selectInputProps, onPopupVisibleChange 属性，具体描述查看文档
Jumper: 新增 jumper 组件
Space: 优化空元素渲染
Cascader: 基于 select-input 重构, 文本过长省略使用原生 title 展示全文本，不再使用 tooltip 组件

🐞 Bug Fixes

table: 表头吸顶显示问题
table: paginationAffixedBottom 支持配置 Affix 组件全部特性
treeselect: 默认lazy异步加载开启，与api保持一致
DatePicker: 修复 presetsPlacement 不生效的问题
colorpicker: 修复最近使用颜色的功能
Table: 树形结构行选中，没有配置 tree，则当作普通表格行选中处理
Table: 修复树形数据表格，选中子节点时，会导致父节点自动折叠问题
Table: 修复合并单元格，动态数据显示异常问题、
Table: 可编辑功能，数据更新不及时问题
Cascader: 修复数据中 value 的数据类型为 number 时，clearable 失效
Dialog: 修复滚动失效问题
select: 修复多选下换行提前占满一行的问题
Upload: 修复 disabled 依然可删除问题
colorPicker: 修复在 ColorTrigger 输入色值时，自动format输入值并回填的问题
table: 兼容树状表格未传入 tree 属性的场景

详情见：https://github.com/Tencent/tdesign-react/releases/tag/0.36.2

Miniprogram for WeChat 发布 0.14.0

❗ Breaking Changes

TextArea: 移除不生效的外部样式类 t-class-placeholder, 建议使用类名 t-textarea__placeholder 进行样式覆盖，存在不兼容更新

🌈 Features

ActionSheet: 新增 t-class-content、t-class-cancel 外部样式类
Progress: 新增t-class-bar外部样式类
Picker:
- 新增 confirm 事件，返回参数和 change 一致
- confirm、change、pick 事件均返回 label 参数

🐞 Bug Fixes

Tabbar: 修复具名插槽无法使用的问题
修复默认层级问题
- Dialog
- DropdownMenu
- Drawer
- Message
- Popup
Fab: 修复 text 属性不生效的问题
NoticeBar: 修复公告不滚动问题
Dialog: 修复点击遮罩层不会触发 close 事件的问题

详情见：https://github.com/Tencent/tdesign-miniprogram/releases/tag/0.14.0

Vue3 for Mobile 发布 0.9.0

❗ Breaking Changes

Progress: 移除 size 和 theme 属性，存在不兼容更新
Picker:重构Picker组件，存在不兼容更新
- 移除子组件<picker-item/>，新增基于Picker开发的级联选择组件<cascade />
- 新增columns，代表配置每一列的选项；新增renderLabel，用于自定义渲染label；新增onPick，选中任何一列时均会触发
- 修改onChange，onConfirm的回调参数
- DateTimePicker:重构DateTimePicker组件
- 移除disableDate、showWeek
- 新增start，用于设置最小可选时间；新增end，用于设置最大可选时间
- 将onColumnChange改名为onPick，修改回调参数
- 修改onChange，onConfirm的回调参数
Search: 存在不兼容更新
- 移除 iconColor 属性
- autofocus 更名为 focus
- cancelButtonText 更名为 action
- 新增 leftIcon 支持左侧图标定制
- 新增 value 和 default-value 控制输入框的值
- cancel 事件更名为 action-click
- 新增 blur 和 focus 事件
Collapse:存在不兼容更新
- accordion 更名为 expandMutex
- 移除 title、labelWidth 属性
- 新增 disabled、expandIcon、onChange 属性无效的问题
CollapsePanel: 存在不兼容更新
- name 更为为 value
- title 更名为 header
- extra 更名为 headerRightContent
- 移除 labelWidth、headerClickable 属性
- 新增 default、expandIcon 属性
- 移除 click 事件
Drawer: 存在不兼容更新
- 移除 slider 属性
- 新增 items、placement、showOverlay、zIndex 等属性
- 新增 close、item-click、overlay-click 等事件

🌈 Features

Indexes: 新增 Indexes 组件
Input: 新增支持 size 属性
Fab: 新增支持 buttonProps 和 style 属性
Cell: 新增支持 image 插槽
Rate: 新增支持 gap 属性
Loading: 新增支持 duration、inheritColor、pause、reverse 属性
Dialog:
- 增支持 actions 和 preventScrollThrough 属性
- 新增支持支持 confirmBtn 和 cancelBtn 的插槽
Checkbox: 新增支持 maxContentRow 和 maxLabelRow 属性
CheckboxGroup: 新增支持 max 属性
Swiper: 新增支持 minShowNum 属性
Upload:
- 新增 select-change 事件
- 新增支持 allowUploadDuplicateFile 属性