快速开始

timi-tdesign-mobile 是面向移动端的 Vue 3 业务组件库，底层复用 timi-web 的编辑器与内容渲染能力，UI 基于 TDesign Mobile。

安装

pnpm add timi-tdesign-mobile tdesign-mobile-vue

按需引入

组件在 <script setup> 中导入后即可在模板里使用，这是推荐方式：

<script lang="ts" setup>
import { ref } from "vue";
import { CodeEditor } from "timi-tdesign-mobile";

const code = ref("const answer = 42;");
</script>

<template>
	<code-editor v-model="code" language="typescript" />
</template>

全局注册

每个组件都带有 install 方法，可以单独注册为全局组件：

import { createApp } from "vue";
import { CodeEditor, TiptapEditor } from "timi-tdesign-mobile";

const app = createApp(App);
app.use(CodeEditor);
app.use(TiptapEditor);

富文本工具栏等组件内部使用了 timi-web 的 v-popup 指令，且用在组件模板里，宿主的应用入口需要注册一次：

import TimiWebUI, { VPopup } from "timi-web";

app.use(TimiWebUI);
app.directive("popup", VPopup);

漏掉这一步不会报错，但工具栏的悬停提示会静默失效。

引入样式

import "timi-tdesign-mobile/style.css";

该样式入口已包含 TDesign 定制与编辑器正文样式，timi-web 的样式也会一并带入。

另外还需要引入 TDesign Mobile 自己的样式，注意要引完整包而不是 es/style/index.css——后者只含全局 token，不含任何组件类：

import "tdesign-mobile-vue/dist/tdesign.css";

数据与回调

文章、通知类组件只约束对象的最小字段，业务对象上的其他字段会原样保留。上传与附件地址通过回调注入，库本身不绑定任何接口实现：

<article-editor
	:model-value="article"
	:upload-image="uploadImage"
	:upload-video="uploadVideo"
	:resolve-attachment-url="resolveAttachmentUrl"
	@update:model-value="article = $event"
/>

没有附件上传需求时，可以不传上传回调。

AI 对话

对话能力由 useAiChat 组合式函数提供，组件只负责渲染：

import { useAiChat } from "timi-tdesign-mobile";

const { messages, isGenerating, sendMessage } = useAiChat({
	request: ({ message, signal }) => fetchSseReply(message, signal)
});

详见 AiChatPanel 与 AI 对话场景。

下一步

在组件总览中浏览全部组件
看编辑器能力总览等场景，了解多个组件如何协作
了解本站的演示与文档约定，向文档站补充新组件

2.7 KiB Raw Blame History