JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-05 19:41:40 +08:00
Code Issues Projects Releases Wiki Activity

docs: 更新教程中使用的tmagic版本

Browse Source
This commit is contained in:
roymondchen 2024-12-13 17:30:48 +08:00
parent 98f45d2334
commit 4f23aebd7f
3 changed files with 10 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/guide/tutorial/hello-world.md
View File

@ -51,7 +51,7 @@ cd hello-world
## 添加依赖 ## 添加依赖
```bash ```bash
npm install --save @tmagic/editor @tmagic/form @tmagic/stage @tmagic/design @tmagic/element-plus-adapter element-plus npm install --save @tmagic/editor @tmagic/element-plus-adapter element-plus
``` ```
## 注册组件 ## 注册组件
@ -61,25 +61,19 @@ npm install --save @tmagic/editor @tmagic/form @tmagic/stage @tmagic/design @tma
```ts ```ts
import 'element-plus/dist/index.css'; import 'element-plus/dist/index.css';
import '@tmagic/editor/dist/style.css'; import '@tmagic/editor/dist/style.css';
import '@tmagic/form/dist/style.css';
import { createApp } from 'vue'; import { createApp } from 'vue';
import ElementPlus from 'element-plus'; import ElementPlus from 'element-plus';
import TMagicDesign from '@tmagic/design';
import TMagicEditor from '@tmagic/editor'; import TMagicEditor from '@tmagic/editor';
import TMagicElementPlusAdapter from '@tmagic/element-plus-adapter'; import TMagicElementPlusAdapter from '@tmagic/element-plus-adapter';
import TMagicForm from '@tmagic/form';
import App from './App.vue'; import App from './App.vue';
createApp(App) createApp(App)
.use(ElementPlus) .use(ElementPlus)
.use(TMagicDesign, TMagicElementPlusAdapter) .use(TMagicEditor, TMagicElementPlusAdapter)
.use(TMagicEditor)
.use(TMagicForm)
.mount('#app'); .mount('#app');
``` ```
## 渲染编辑器 ## 渲染编辑器
@ -185,7 +179,7 @@ const render = () => {
createApp( createApp(
{ {
template: '<p v-for="node in config.items" :key="node.id" :id="node.id">hello world</p>', template: '<p v-for="node in config.items" :key="node.id" :data-tmagic-id="node.id">hello world</p>',
props: ['config'], props: ['config'],
}, },
{ {
@ -249,7 +243,7 @@ const render = async ({ renderer }: StageCore) => {
createApp( createApp(
{ {
template: '<div v-for="node in config.items" :key="node.id" :id="node.id">hello world</div>', template: '<div v-for="node in config.items" :key="node.id" :data-tmagic-id="node.id">hello world</div>',
props: ['config'], props: ['config'],
}, },
{ {

6
docs/guide/tutorial/render.md
View File

@ -4,11 +4,9 @@ tmagic 提供了 vue3/vue2/react 三个版本的解析渲染组件，可以直
[@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui) [@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui)
[@tmagic/ui-vue2](https://www.npmjs.com/package/@tmagic/ui-vue2)
[@tmagic/ui-react](https://www.npmjs.com/package/@tmagic/ui-react) [@tmagic/ui-react](https://www.npmjs.com/package/@tmagic/ui-react)
接下来是以vue3为基础，来讲述如何实现一个[@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui) 接下来是以vue为基础，来讲述如何实现一个[@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui)
## 准备工作 ## 准备工作
@ -71,7 +69,7 @@ app.component('hello-world', HelloWorld);
```vue ```vue
<template> <template>
<component v-if="config" :is="type" :id="`${id}`" :style="style" :config="config"></component> <component v-if="config" :is="type" :tmagic-data-id="`${id}`" :style="style" :config="config"></component>
</template> </template>
<script lang=ts setup> <script lang=ts setup>

8
docs/guide/tutorial/runtime.md
View File

@ -22,7 +22,7 @@ cd editor-runtime
按钮需要用的ts types依赖 按钮需要用的ts types依赖
```bash ```bash
npm install --save @tmagic/schema @tmagic/stage npm install --save @tmagic/core @tmagic/stage
``` ```
## 实现runtime ## 实现runtime
@ -33,8 +33,8 @@ npm install --save @tmagic/schema @tmagic/stage
```vue ```vue
<template> <template>
<div v-if="config" :id="config.id" :style="style"> <div v-if="config" :data-tmagic-id="config.id" :style="style">
<div v-for="node in config.items" :key="node.id" :id="node.id">hello world</div> <div v-for="node in config.items" :key="node.id" :data-tmagic-id="node.id">hello world</div>
</div> </div>
</template> </template>
@ -179,8 +179,8 @@ declare global {
``` ```
```ts ```ts
import type { Id, MApp, MNode } from '@tmagic/core';
import type { RemoveData, UpdateData } from '@tmagic/stage'; import type { RemoveData, UpdateData } from '@tmagic/stage';
import type { Id, MApp, MNode } from '@tmagic/schema';
const root = ref<MApp>(); const root = ref<MApp>();