更新记录

0.8.1（2026-04-09） 下载此版本

Features

• Icon: 新增 divider-1, voice-wave 和 keyboard-1 图标 @uyarn (#4395)

Bug Fixes

• Form: 修复 FormItem 右侧箭头深色模式颜色错误 @anlyyao (#4384)
• Rate: 修复提示框层级不够被覆盖的问题 @liweijie0812 (#4386)

0.8.0（2026-03-23） 下载此版本

Breaking Changes

• DateTimePicker: 废弃 custom-locale 属性，请用 ConfigProvider 替换该功能 @novlan1 (#4350)

Features

• Cascader: 新增 PopupProps 属性，透传至 Popup @novlan1 (#4320)
• ConfigProvider: 新增 ConfigProvider 全局特性配置组件 @novlan1 (#4350)
• Picker: 支持 v-model:value 语法糖 @novlan1 (#4320)

Bug Fixes

• ColorPicker: 修复弹窗模式下预设颜色（swatch-colors）无法横向滚动 @novlan1 (#4350)
• DateTimePicker: 修复 format 含非日期 token（如 ddd）时，格式化后的值回传导致 Invalid Date 的问题 @novlan1 (#4320)
• Form: 修复 required-mark 无效问题 @novlan1 (#4350)
• Tabs: 修复开启 animation 和 lazy 时，跳跃切换选项卡内容区域显示异常的问题 @novlan1 (#4350)
• Toast: 修复 setup 语法下，函数式调用时找不到实例的问题 @novlan1 (#4312)
• Upload:
  • 修复 @upload-disabled-mask 变量默认值错误 @anlyyao (#4303)
  • 修复 H5 环境下回调中 URL 错误问题 @novlan1 (#4320)

0.7.3（2026-03-04） 下载此版本

Bug Fixes

• Button: 去除多余动画效果 @novlan1 (#4305)
• Dialog: 修复确认/取消按钮不显示问题 @novlan1 (#4305)
• Theme: 修复 index.css 尺寸值错误的问题 @liweijie0812 (#4290)

平台兼容性

uni-app(3.7.3)

uni-app x(3.7.3)

其他

TDesign 适配 uniapp 的组件库。

文档

点此查看

预览

扫码查看 ↓

其他平台同样支持，仅因平台审核等原因未能上架预览，不影响组件库正常使用。

安装

NPM 方式

npm i @tdesign/uniapp

UNI_MODULES 方式

已上传 插件 到 DCloud 插件市场，请打开插件详情页并点击使用 HBuilderX 导入插件。

使用

步骤一：引入样式文件

在 main.ts 中引入组件库样式：

CLI 模式

// Less（推荐，rpx 单位，与 tdesign-miniprogram 完全一致）
import '@tdesign/uniapp/theme.less';

// 或者引入编译后的 CSS 文件
import '@tdesign/uniapp/theme.css';

HBuilderX 模式

// Less（推荐，rpx 单位，与 tdesign-miniprogram 完全一致）
import './uni_modules/tdesign-uniapp/components/theme.less';

// 或者引入编译后的 CSS 文件
import './uni_modules/tdesign-uniapp/components/theme.css';

步骤二：注册组件

自动导入（推荐）

配置 easycom 后，无需手动引入组件即可直接在模板中使用，在 pages.json 中添加以下配置：

CLI 模式：使用 node_modules 下的 @tdesign/uniapp 时，配置如下。

{
  "easycom": {
    "custom": {
      "^t-(.*)": "@tdesign/uniapp/$1/$1.vue"
    }
  }
}

HBuilderX 模式：使用 uni_modules 下的 tdesign-uniapp 时，配置如下。

{
  "easycom": {
    "custom": {
      "^t-(.*)": "@/uni_modules/tdesign-uniapp/components/$1/$1.vue"
    }
  }
}

配置完成后，可以直接在模板中使用组件：

<template>
  <t-loading />
</template>

手动导入

如果不使用 easycom，也可以在 <script> 中手动导入组件：

<template>
  <t-loading />
</template>

<script lang="ts" setup>
import TLoading from '@tdesign/uniapp/loading/loading.vue';
</script>

只提供按需导入方式，不支持全量导入（全量导入在小程序下有兼容性问题）。

步骤三：配置编辑器提示（可选）

推荐安装 Vue (Official) 插件，并在项目的 tsconfig.json 的 compilerOptions.types 属性中增加 @tdesign/uniapp/global，即可在 VSCode 等主流编辑器中获得组件名及 API 的智能提示。

{
  "compilerOptions": {
    "types": [
      "@tdesign/uniapp/global",
    ]
  }
}

平台兼容性

浏览器兼容性

Firefox	Chrome	iOS Safari	Samsung	Opera	Android Browser
Firefox >=104	Chrome >=105	iOS Safari >=12.2	Samsung >=10.2	Opera >=64	Android Browser >=105

详情参见移动端组件库浏览器兼容性说明

模板项目

我们提供了多种开箱即用的模板项目，帮助你快速开始开发。

模板	描述	预览
TDesign UniApp Starter	Vue3 + CLI 模式模板 - 通用类
TDesign UniApp Starter Apply	Vue3 + CLI 模式模板 - 活动报名
TDesign UniApp Starter Vue3 HX	Vue3 + HBuilderX 模式模板
TDesign UniApp Starter Vue2 CLI	Vue2 + CLI 模式模板
TDesign UniApp Starter Vue2 HX	Vue2 + HBuilderX 模式模板

反馈

有任何问题，建议通过 Github issues 反馈或扫码加入用户微信群。

开源协议

TDesign 遵循 MIT 协议。