tdesign-uniapp - npm explorer

TDesign 适配 uniapp 的组件库。

文档

点此查看

预览

扫码查看 ↓

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

安装

$3

``bash npm i tdesign-uniapp`

`$3`

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

`使用`

1. 在 main.ts 中引入样式文件

`js // CLI 模式 import 'tdesign-uniapp/common/style/theme/index.css';

// HBuilderX 模式 // import './uni_modules/tdesign-uniapp/components/common/style/theme/index.css';`

也可以引入 rpx 单位的 less 文件，该文件与 tdesign-miniprogram 完全一致。

`js // CLI 模式 import 'tdesign-uniapp/common/style/theme/index.less';

// HBuilderX 模式 // import './uni_modules/tdesign-uniapp/components/common/style/theme/index.less';`

2. 在文件中使用

`html

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

`自动导入`

在 pages.json 配置 easycom，可实现自动导入。

`$3`

使用 CLI 模式，即使用 node_modules 下的 tdesign-uniapp 时，配置如下。

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

`$3`

使用 uni_modules 下的 tdesign-uniapp 时，配置如下。

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

`编辑器提示`

安装注册 TDesign 之后，在开发项目时，可以配合插件在VSCode等主流编辑器中达到提示组件名及API的效果。

推荐安装 Volar，并在项目的 tsconfig.json 的 includes 属性中增加 node_modules/tdesign-uniapp/global.d.ts`，即可实现该效果。

平台兼容性

| 平台 | Vue2 | Vue3 | H5 | Android | iOS | App-nvue | 微信小程序 | QQ小程序 |
| ------------ | ---- | ---- | --- | ------- | --- | -------- | ---------- | -------- |
| 支持情况 | ✅ | ✅ | ✅ | ✅ | ✅ | ⚠️ | ✅ | ✅ |

| 平台 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 小红书小程序 | 京东小程序 |
| ------------ | ------------ | ---------- | ---------- | ---------- | ------------ | ---------- |
| 支持情况 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |

浏览器兼容性

|
Firefox |
Chrome |
iOS Safari|
Samsung |
Opera |[]()
Android Browser|
| --------- | --------- | --------- | --------- | --------- |--------- |
| Firefox >=104| Chrome >=105| iOS Safari >=12.2| Samsung >=10.2 | Opera >=64 | Android Browser >=105 |