TDesign Chat 适配 uniapp 的组件库。

文档

点此查看

预览

扫码查看 ↓

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

安装

NPM 方式

npm i @tdesign/uniapp-chat

UNI_MODULES 方式

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

使用

@tdesign/uniapp-chat 依赖 @tdesign/uniapp，请确保项目中已安装 @tdesign/uniapp。

步骤一：引入样式文件

在 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-chat 时，配置如下。

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

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

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

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

<template>
  <t-chat-list />
</template>

手动导入

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

<template>
  <t-chat-list />
</template>

<script lang="ts" setup>
import TChatList from '@tdesign/uniapp-chat/chat-list/chat-list.vue';
</script>

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

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

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

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

平台兼容性

| 平台 | 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 |

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

反馈

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

开源协议

TDesign 遵循 MIT 协议。