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

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 属性

? Bug Fixes

• Badge: 修复 showZero 属性无效的问题
• Badge: 修复 maxCount 属性无效的问题
• DropdownMenu: 修复单选 update:value 失效的问题
• Radio: 修复非受控用法错误的问题

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

React for Mobile 发布 0.1.0

• 适配移动端交互
• 基于 React 16.x（全部基于 React Hooks 的 Functional Component）
• 与其他框架/库（Vue / Angular）版本 UI 保持一致
• 支持按需加载

详情见：https://tdesign.tencent.com/mobile-react/getting-started

解决方案

TDesign Vue Starter 发布 0.3.0

Refactor

• 全面替换less vars颜色方案为CSS Token方案 与其他页面模板保持一致
• 移除vue-color，使用组件库的color-picker-panel组件

? Features

• 升级组件库依赖至0.43+ datepicker 使用方式有调整

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

 

更新公告：https://github.com/Tencent/tdesign/releases/tag/v2022.7.5