JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-04 06:02:45 +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
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
import 'element-plus/dist/index.css';
import '@tmagic/editor/dist/style.css';
import '@tmagic/form/dist/style.css';
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import TMagicDesign from '@tmagic/design';
import TMagicEditor from '@tmagic/editor';
import TMagicElementPlusAdapter from '@tmagic/element-plus-adapter';
import TMagicForm from '@tmagic/form';
import App from './App.vue';
createApp(App)
.use(ElementPlus)
.use(TMagicDesign, TMagicElementPlusAdapter)
.use(TMagicEditor)
.use(TMagicForm)
.use(TMagicEditor, TMagicElementPlusAdapter)
.mount('#app');
```
## 渲染编辑器
@ -185,7 +179,7 @@ const render = () => {
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'],
},
{
@ -249,7 +243,7 @@ const render = async ({ renderer }: StageCore) => {
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'],
},
{

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-vue2](https://www.npmjs.com/package/@tmagic/ui-vue2)
[@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
<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>
<script lang=ts setup>

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

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