103 lines
2.7 KiB
Markdown
103 lines
2.7 KiB
Markdown
# 快速开始
|
|
|
|
`timi-tdesign-mobile` 是面向移动端的 Vue 3 业务组件库，底层复用 `timi-web` 的编辑器与内容渲染能力，UI 基于 TDesign Mobile。
|
|
|
|
## 安装
|
|
|
|
```sh
|
|
pnpm add timi-tdesign-mobile tdesign-mobile-vue
|
|
```
|
|
|
|
## 按需引入
|
|
|
|
组件在 `<script setup>` 中导入后即可在模板里使用，这是推荐方式：
|
|
|
|
```vue
|
|
<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` 方法，可以单独注册为全局组件：
|
|
|
|
```ts
|
|
import { createApp } from "vue";
|
|
import { CodeEditor, TiptapEditor } from "timi-tdesign-mobile";
|
|
|
|
const app = createApp(App);
|
|
app.use(CodeEditor);
|
|
app.use(TiptapEditor);
|
|
```
|
|
|
|
## 必须注册 v-popup 指令
|
|
|
|
富文本工具栏等组件内部使用了 `timi-web` 的 `v-popup` 指令，且用在组件模板里，宿主的应用入口需要注册一次：
|
|
|
|
```ts
|
|
import TimiWebUI, { VPopup } from "timi-web";
|
|
|
|
app.use(TimiWebUI);
|
|
app.directive("popup", VPopup);
|
|
```
|
|
|
|
漏掉这一步不会报错，但工具栏的悬停提示会静默失效。
|
|
|
|
## 引入样式
|
|
|
|
```ts
|
|
import "timi-tdesign-mobile/style.css";
|
|
```
|
|
|
|
该样式入口已包含 TDesign 定制与编辑器正文样式，`timi-web` 的样式也会一并带入。
|
|
|
|
**另外还需要引入 TDesign Mobile 自己的样式**，注意要引完整包而不是 `es/style/index.css`——后者只含全局 token，不含任何组件类：
|
|
|
|
```ts
|
|
import "tdesign-mobile-vue/dist/tdesign.css";
|
|
```
|
|
|
|
## 数据与回调
|
|
|
|
文章、通知类组件只约束对象的最小字段，业务对象上的其他字段会原样保留。上传与附件地址通过回调注入，库本身不绑定任何接口实现：
|
|
|
|
```vue
|
|
<article-editor
|
|
:model-value="article"
|
|
:upload-image="uploadImage"
|
|
:upload-video="uploadVideo"
|
|
:resolve-attachment-url="resolveAttachmentUrl"
|
|
@update:model-value="article = $event"
|
|
/>
|
|
```
|
|
|
|
没有附件上传需求时，可以不传上传回调。
|
|
|
|
## AI 对话
|
|
|
|
对话能力由 `useAiChat` 组合式函数提供，组件只负责渲染：
|
|
|
|
```ts
|
|
import { useAiChat } from "timi-tdesign-mobile";
|
|
|
|
const { messages, isGenerating, sendMessage } = useAiChat({
|
|
request: ({ message, signal }) => fetchSseReply(message, signal)
|
|
});
|
|
```
|
|
|
|
详见 [AiChatPanel](/components/ai-chat-panel) 与 [AI 对话场景](/scenarios/ai)。
|
|
|
|
## 下一步
|
|
|
|
- 在[组件总览](/components/)中浏览全部组件
|
|
- 看[编辑器能力总览](/scenarios/editor)等场景，了解多个组件如何协作
|
|
- 了解本站的[演示与文档约定](/guide/demo)，向文档站补充新组件
|