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

feat(editor): 添加几个slot

Browse Source
This commit is contained in:
roymondchen 2023-06-06 14:20:12 +08:00
parent 39033ca6fb
commit 97101f18a6
3 changed files with 34 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/editor/src/Editor.vue
View File

@ -1,9 +1,19 @@
<template> <template>
<Framework :code-options="codeOptions"> <Framework>
<template #header>
<slot name="header"></slot>
</template>
<template #nav> <template #nav>
<slot name="nav" :editorService="editorService"><TMagicNavMenu :data="menu"></TMagicNavMenu></slot> <slot name="nav" :editorService="editorService"><TMagicNavMenu :data="menu"></TMagicNavMenu></slot>
</template> </template>
<template #content-before>
<slot name="content-before"></slot>
</template>
<template #src-code><slot name="src-code" :editorService="editorService"></slot></template>
<template #sidebar> <template #sidebar>
<slot name="sidebar" :editorService="editorService"> <slot name="sidebar" :editorService="editorService">
<Sidebar :data="sidebar" :layer-content-menu="layerContentMenu"> <Sidebar :data="sidebar" :layer-content-menu="layerContentMenu">
@ -60,6 +70,14 @@
</template> </template>
<template #empty><slot name="empty" :editorService="editorService"></slot></template> <template #empty><slot name="empty" :editorService="editorService"></slot></template>
<template #content-after>
<slot name="content-after"></slot>
</template>
<template #footer>
<slot name="footer"></slot>
</template>
</Framework> </Framework>
</template> </template>

4
packages/editor/src/layouts/CodeEditor.vue
View File

@ -14,8 +14,8 @@ defineOptions({
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
initValues?: string | Object; initValues?: string | Record<string | number, any> | null;
modifiedValues?: string | Object; modifiedValues?: string | Record<string | number, any> | null;
type?: 'diff'; type?: 'diff';
language?: string; language?: string;
options?: { options?: {

30
packages/editor/src/layouts/Framework.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<div class="m-editor"> <div class="m-editor">
<slot name="nav" class="m-editor-nav-menu"></slot> <slot name="header"></slot>
<magic-code-editor <slot name="nav"></slot>
v-if="showSrc"
class="m-editor-content" <slot name="content-before"></slot>
:init-values="root"
:options="codeOptions" <slot name="src-code" v-if="showSrc">
@save="saveCode" <CodeEditor class="m-editor-content" :init-values="root" :options="codeOptions" @save="saveCode"></CodeEditor>
></magic-code-editor> </slot>
<Layout <Layout
v-else v-else
@ -39,6 +39,9 @@
</TMagicScrollbar> </TMagicScrollbar>
</template> </template>
</Layout> </Layout>
<slot name="content-after"></slot>
<slot name="footer"></slot>
</div> </div>
</template> </template>
@ -51,6 +54,7 @@ import Layout from '@editor/components/Layout.vue';
import type { GetColumnWidth, Services } from '@editor/type'; import type { GetColumnWidth, Services } from '@editor/type';
import AddPageBox from './AddPageBox.vue'; import AddPageBox from './AddPageBox.vue';
import CodeEditor from './CodeEditor.vue';
defineOptions({ defineOptions({
name: 'MEditorFramework', name: 'MEditorFramework',
@ -59,15 +63,7 @@ defineOptions({
const DEFAULT_LEFT_COLUMN_WIDTH = 310; const DEFAULT_LEFT_COLUMN_WIDTH = 310;
const DEFAULT_RIGHT_COLUMN_WIDTH = 480; const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
withDefaults( const codeOptions = inject('codeOptions', {});
defineProps<{
codeOptions?: Record<string, any>;
}>(),
{
codeOptions: () => ({}),
},
);
const { editorService, uiService } = inject<Services>('services') || {}; const { editorService, uiService } = inject<Services>('services') || {};
const root = computed(() => editorService?.get('root')); const root = computed(() => editorService?.get('root'));