add vitepress docs
This commit is contained in:
@@ -0,0 +1,102 @@
|
||||
# 快速开始
|
||||
|
||||
`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),向文档站补充新组件
|
||||
Reference in New Issue
Block a user