聚合全网技术文章,根据你的阅读喜好进行个性推荐
TDesign 是一款诞生于腾讯内部、拥有完整的设计价值观和视觉风格指南的企业级设计体系,同时提供了丰富的设计资源,在设计体系基础上产出基于 Vue、React、小程序等业界主流技术栈的组件库解决方案,适合用于构建设计统一 / 多端覆盖 / 跨技术栈的企业级前端应用。
目前,TDesign 发布了 2022 年 7 月的第一周更新,带来如下变更:
Form
trigger: 'blur'
FormItem.label
string
Form.errorMessage
${name}
label
slot/function
FormItem.name
indent
0
Dialog/Drawer
closeOnOverlayClick
closeOnEscKeydown
Drawer
header
undefined
Dialog
number
Table
ColorPicker
ConfigProvider
DatePicker
详情见:https://github.com/Tencent/tdesign-vue/releases/tag/0.43.2
table
Jumper
jumper
paginationAffixedBottom
Upload
RadioGroup
Tree
getRightData
value
alias
form.onSubmit
scrollToFirstError
clearble
indent = 0
Slider
InputNumber
range
min
max
Select
height 100%
Pagination
RangeInput
rangeinput
详情见:https://github.com/Tencent/tdesign-vue-next/releases/tag/0.17.3
indeterminateSelectedRowKeys
treeDataMap
Cascader
popupVisible, readonly, selectInputProps, onPopupVisibleChange
Space
select-input
tooltip
treeselect
colorpicker
tree
clearable
select
colorPicker
ColorTrigger
format
详情见:https://github.com/Tencent/tdesign-react/releases/tag/0.36.2
TextArea
t-class-placeholder
t-textarea__placeholder
ActionSheet
t-class-content
t-class-cancel
Progress
t-class-bar
Picker
confirm
change
pick
Tabbar
Fab
text
NoticeBar
close
详情见:https://github.com/Tencent/tdesign-miniprogram/releases/tag/0.14.0
size
theme
<picker-item/>
<cascade />
columns
renderLabel
onPick
onChange
onConfirm
DateTimePicker
disableDate
showWeek
start
end
onColumnChange
Search
iconColor
autofocus
focus
cancelButtonText
action
leftIcon
default-value
cancel
action-click
blur
Collapse
accordion
expandMutex
title
labelWidth
disabled
expandIcon
CollapsePanel
name
extra
headerRightContent
headerClickable
default
click
slider
items
placement
showOverlay
zIndex
item-click
overlay-click
Indexes
Input
buttonProps
style
Cell
image
Rate
gap
Loading
duration
inheritColor
pause
reverse
actions
preventScrollThrough
confirmBtn
cancelBtn
Checkbox
maxContentRow
maxLabelRow
CheckboxGroup
Swiper
minShowNum
select-change
allowUploadDuplicateFile
Badge
showZero
maxCount
DropdownMenu
update:value
Radio
详情见:https://github.com/Tencent/tdesign-mobile-vue/releases/tag/0.9.0
详情见:https://tdesign.tencent.com/mobile-react/getting-started
less
vars
vue-color
color-picker-panel
datepicker
详情见:https://github.com/Tencent/tdesign-vue-starter/releases/tag/0.3.0
更新公告:https://github.com/Tencent/tdesign/releases/tag/v2022.7.5
评论删除后,数据将无法恢复
腾讯企业级设计体系 TDesign 发布 2022.7 第一周更新
TDesign 是一款诞生于腾讯内部、拥有完整的设计价值观和视觉风格指南的企业级设计体系,同时提供了丰富的设计资源,在设计体系基础上产出基于 Vue、React、小程序等业界主流技术栈的组件库解决方案,适合用于构建设计统一 / 多端覆盖 / 跨技术栈的企业级前端应用。
目前,TDesign 发布了 2022 年 7 月的第一周更新,带来如下变更:
组件库
Vue2 for Web 发布 0.43.2
🌈 Features
Form
:trigger: 'blur'
- 现在FormItem.label
为string
类型时,Form.errorMessage
模板中的${name}
会被替换为FormItem.label
属性;当label
属性为slot/function
时,${name}
会被替换为FormItem.name
属性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
: 添加内置校验方法 whitespacetable
: 可编辑单元格,支持编辑组件联动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
: 添加内置校验方法 whitespaceTable
: 新增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
: 修复具名插槽无法使用的问题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
详情见: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
datepicker
使用方式有调整详情见:https://github.com/Tencent/tdesign-vue-starter/releases/tag/0.3.0
更新公告:https://github.com/Tencent/tdesign/releases/tag/v2022.7.5