TDesign 更新周报（2022年12月第1周）

原创

TDesign

发布于 2022-12-01 17:08:01

2.1K0

发布于 2022-12-01 17:08:01

文章被收录于专栏：TDesign 技术视野・开发篇

组件库

Vue2 for Web 发布 0.51.1

❗ Breaking Changes

Jumper: Jumper 更名为 PaginationMini 组件，正在使用 Jumper 组件的同学请从 Pagination 中导出替换 @honkinglin (#1845)

🚀 Features

Calendar:
- 日历组件支持多个高亮单元格； @PsTiu (#1850)
- 卡片样式菜单操作栏样式调整 @uyarn (#1863)
Table: 选中行功能，新增 reserveSelectedRowOnPaginate，用于支持在分页场景中，仅选中当前页数据，切换分页时清空选中结果，全选仅选中当前页数据 @chaishi (#1849)
Tree: 使用 composition api 重构组件 @TabSpace (#837)

🐞 Bug Fixes

Drawer:
- 修复 closeOnOverlayClick 存在默认值导致全局配置失效问题 @chaishi (#1844)
- 修复 drawer 动画失效的问题 @honkinglin (#1858)
Table: @chaishi (#1849)
- 修复本地数据分页场景中，切换分页大小，onPageChange 事件参数返回的数据不正确问题
- 序号列支持跨分页显示 tdesign-vue-next#2072
- 修复分页场景下，设置 max-height 和 bordered 之后，边框线位置不正确 issue#2062
- 行选中事件参数选中数据支持 data.push， issue#1747
AutoComplete: 支持使用 triggerElement 自定义触发元素 @chaishi (#1848)
Input: 宽度自适应 auto-width 支持中文拼音输入也实时调整宽度，issue#2079 @chaishi (#1853)
Dialog: 修复 destroyOnClose 设置后关闭弹窗无动画效果问题 @honkinglin (#1857)
TagInput: @chaishi (#1860)
- 不同尺寸的间距和高度问题修复，issue#1843
- 修复右侧图标会和标签重合问题
- 修复 onRemove 事件参数未能返回最新 value 问题
- 修复未能正确透传 inputProps 问题
Menu: 修复二级菜单子菜单纵向左边距丢失的问题 @uyarn (#1863)

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

Vue3 for Web 发布 0.25.0

❗ Breaking Changes

Jumper: Jumper 更名为 PaginationMini 组件，正在使用 Jumper 组件的同学请从 Pagination 中导出替换 @honkinglin (#2066)

🚀 Features

Table: 选中行功能，新增 reserveSelectedRowOnPaginate，用于支持在分页场景中，仅选中当前页数据，切换分页时清空选中结果，全选仅选中当前页数据 @chaishi (#2074)
Calendar: 日历组件支持多个高亮单元格； @PsTiu (#2075)

🐞 Bug Fixes

Table:
- 修复本地数据分页场景中，切换分页大小，onPageChange 事件参数返回的数据不正确问题 @chaishi (#2074)
- 序号列支持跨分页显示(issue#2072) @chaishi (#2074)
- 修复分页场景下，设置 max-height 和 bordered 之后，边框线位置不正确 (issue#2062) @chaishi (#2074)
- 行选中事件参数选中数据支持 data.push(tdesign-vue#1747) @chaishi (#2074)
TagInput:
- 不同尺寸的间距和高度问题修复 (issue#1843) @chaishi (#2087)
- 右侧图标会和标签重合问题 @chaishi (#2087)
- 修复 onRemove 事件参数未能返回最新 value 问题 @chaishi (#2087)
- 修复拼音输入时按下 Enter 触发标签确认问题 @chaishi (#2087)
- 修复拼音输入时按下删除键触发标签删除问题，当在拼音输入完成后允许删除标签(issue#1857) @chaishi (#2087)
Image:
- 修复 placeholder 接收类型警告 (issue #2093) @pengYYYYY (#2094)
- 修复图片组件的 overlayContent 无效 (issue #1996) @pengYYYYY (#2094)
AutoComplete: 支持使用 triggerElement 自定义 AutoComplete 的触发元素 @chaishi (#2070)
Tooltip: 修复继承 Popup 组件 disabled 属性失效 (issue #1962) @Zzongke (#2069)
Calendar: 修复日历组件在月历模式下高亮显示的 bug。 @PsTiu (#2075)
Menu: 修复多层收纳导航 head-menu 默认未激活(issue 1810) @sinbadmaster (#2073)
Dialog: 调整 body 锁定逻辑 @honkinglin (#2083)
Drawer: 修复 drawer 动画效果 @honkinglin (#2089)
Textarea: 修复 status 类型为 default 无效 (issue #2023) @pengYYYYY (#2094)
ImageViewer: 提升 ImageViewer 默认 zIndex (issue #2068) @sinbadmaster (#2071)
Calendar: 修复日历组件中 lodash 的引入会全量引入 @PsTiu (#2082)

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

React for Web 发布 0.44.0

❗ Breaking Changes

Jumper: Jumper 更名为 PaginationMini 组件，正在使用 Jumper 组件的同学请从 Pagination 中导出替换 @honkinglin (#1749)
Tooltip: 移除 placement 的 mouse 模式，该场景请使用 TooltipLite @carolin913 (#1751)

🚀 Features

TooltipLite: placement 支持 mouse 模式，实现原生title体验 @carolin913 (#1751)
Table: 选中行功能，新增 reserveSelectedRowOnPaginate，用于支持在分页场景中，仅选中当前页数据，切换分页时清空选中结果，全选仅选中当前页数据 @chaishi (#1755)
Drawer: 默认不显示关闭按钮，有取消和确认按钮足矣，同其他框架保持一致 @chaishi (#1746)
AutoComplete: 新增组件 AutoComplete @chaishi (#1752)
Calendar: 调整卡片类型的控制面板尺寸大小 @uyarn (#1766)

🐞 Bug Fixes

Table:
- 减少表格重渲染 #1688 @jsonz1993 (#1704)
- 修复本地数据分页场景中，切换分页大小，onPageChange 事件参数返回的数据不正确问题 @chaishi (#1755)
- 序号列支持跨分页显示，issue#1726，tdesign-vue-next#2072 @chaishi (#1755)
- 修复分页场景下，设置 max-height 和 bordered 之后，边框线位置不正确 tdesign-vue-next#2062 @chaishi (#1755)
Card: 修复 Card 组件 loading 高度塌陷 @HelKyle (#1754)
TagInput:
- 标签边距和图标位置调整 @chaishi (#1758)
- 右侧图标会和标签重合问题 @chaishi (#1758)
- 修复 onRemove 事件参数未能返回最新 value 问题 @chaishi (#1758)
Calendar: 修复控制面板对齐的问题 @uyarn (#1766)
Menu: 修复纵向类型二级菜单左边间距丢失的问题 @uyarn (#1766)
Dropdown: 修复透传 className 和 style 的问题 @insekkei (#1745)
Message: 修复在 offset 不存在时 style 生效 @kenzyyang (#1762)
TreeSelect: 修复 valueDisplay 清空按钮不展示问题 @honkinglin (#1757)
SelectInput: 修复某些场景下select-input 无法输入的问题 @HelKyle (#1760)
Drawer: 修复动画效果异常 @honkinglin (#1761)

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

Miniprogram for WeChat 发布 0.28.0

❗ BREAKING CHANGES

Radio: 调整 icon 属性，新增 dot 类型，并简化原有命名 @LeeJim (#1098)
Checkbox: 移除 color 属性，使用 CSS Variables 代替 @LeeJim (#1100)
Search: 移除 label 属性 @LeeJim (#1103)
Textarea: 类名变更，默认不展示计数器，需设置 indicator = true @anlyyao (#1097)
CountDown: size 属性默认值变更为 medium @anlyyao (#1085)
Calendar: 事件返回参数改成时间戳，保持和 value 一致 @LeeJim (#1120)
Input: 外部样式类 t-class-icon 变更为 t-class-prefix-icon @anlyyao (#1109)
Input: size 属性默认值变更为 medium @anlyyao (#1109)

🚀 Features

Radio: 视觉更新 @LeeJim (#1098)
Checkbox: 视觉升级 @LeeJim (#1100)
Search: 视觉升级 @LeeJim (#1103)
Radio: 新增 block 属性，支持横向布局 @LeeJim (#1098)
Radio: 支持 icon 同名插槽 @LeeJim (#1098)
Checkbox: 新增 block 属性，支持横向布局 @LeeJim (#1100)
Checkbox: 属性 icon 新增 string 类型，可选值为 circle/line/rectangle @LeeJim (#1100)
Search: 支持更多 CSS Variables @LeeJim (#1103)
Textarea: 新增 placeholderStyle、fixed 、bordered、 indicator 等属性 @anlyyao (#1097)
Textarea: 新增 CSS Variables，用于调整文本框背景、输入文本颜色 @anlyyao (#1097)
Textarea: 外部样式类新增 t-class-indicator @anlyyao (#1097)
CountDown: 外部样式类新增 t-class-count 和 t-class-split @anlyyao (#1085)
CountDown: 新增 CSS Variables，用于调整倒计时背景、文本颜色 @anlyyao (#1085)
Input: 新增支持 type = nickname @LeeJim (#1115)
Calendar: 自动滚动到 value 对应的月份 @LeeJim (#1119)
Calendar: 新增 change 事件，在不显示确认按钮时使用 @LeeJim (#1120)
Checkbox: 无障碍支持 @Isabella327 (#1105)
Grid: 新增 iconProps 属性 @anlyyao (#1123)
Icon: 新增支持 aira-* 属性 @LeeJim (#1127)
Input: 完成 status 和 tips 属性开发 @anlyyao (#1109)
Input: 新增 layout、clearableIconProps、suffixIconProps、 prefixIconProps属性 @anlyyao (#1109)
Input: 新增 CSS Variables @anlyyao (#1109)
Input: 外部样式新增 t-class-tips @anlyyao (#1109)

🐞 Bug Fixes

Tabs: 修复渲染 panel 时闪烁的问题 @LeeJim (#1093)
Result: 修复装饰性图标获取焦点的问题 @aomnisz (#1082)
Tabs: 修复 placement='left' 时，面板内容不显示问题 @anlyyao (#1099)
Toast: 支持文字换行 @LeeJim (#1107)
Tabs: 修复 panel 切换的问题 @LeeJim (#1106)
Textarea: maxlength 默认值变更为 -1 @anlyyao (#1097)
Tabs: 修复下标不显示的问题 @LeeJim (#1111)
Footer: 支持无障碍 @Isabella327 (#1104)
NavBar: 修复背景色失效的问题 @LeeJim (#1116)
Calendar: 修复受控用法 @LeeJim (#1119)
Calendar: 修复 confirm-btn = null 时仍显示按钮的问题 @LeeJim (#1120)
Cell: 新增支持 CSS Variables @LeeJim (#1117)
Popup: 修复 Popup 以及底层依赖 Popup 的组件无法滚动的问题 @LeeJim (#1125)
Loading: 修复尺寸问题 @LeeJim (#1128)
Result: 修复装饰性图标获取焦点的问题 @aomnisz (#1082)
Footer: 支持无障碍 @Isabella327 (#1104)

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

React for Mobile 发布 0.3.1

🚀 Features

Skeleton: rowCols 支持传入 borderRadius @yuanmeda (#318)

🐞 Bug Fixes

Checkbox: 修复点击 content 无反应的问题 @LeeJim (#328)

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

解决方案及周边

TDesign Vue Starter 发布 0.5.0

❗ Breaking Changes

废弃大量内置less variables, 尺寸、色彩、字体、圆角及阴影统一使用组件库内置变量具体变量可参考 https://tdesign.tencent.com/starter/docs/vue/design-token by @uyarn #195
升级默认主题色的配色方案组件库升级至 0.50.1 及请参照改动 @uyarn #195

🚀 Features

升级 axios 至 1.0 版本

🐞 Bug Fixes

修复组件库升级至 0.50.0 及以上由于头部高度变化导致部分导航模式样式异常的问题 #365 by @uyarn
修复tab栏点击无法自动打开三级菜单问题 by @jiangzenong in Tencent/tdesign-vue-starter#189
修复侧边栏三级菜单路径异常的问题 @uyarn in Tencent/tdesign-vue-starter#196
修复产品卡片示例的方法名错误 by @jiangzenong in Tencent/tdesign-vue-starter#190

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

TDesign Vue Next Starter 发布 0.6.0

❗ Breaking Changes

废弃大量内置less variables, 尺寸、色彩、字体、圆角及阴影统一使用组件库内置变量具体变量可参考 https://tdesign.tencent.com/starter/docs/vue-next/design-token by @uyarn #365
升级默认主题色的配色方案组件库升级至0.24.9及请参照改动 @uyarn #365