JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-06 03:57:56 +08:00
Code Issues Projects Releases Wiki Activity

feat(editor): 添加layer-panel/component-list-panel slot

Browse Source
This commit is contained in:
roymondchen 2022-07-07 19:42:26 +08:00 committed by jia000
parent 8d5eab0ef8
commit 49c9e87d6e
6 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,15 @@
<template #sidebar> <template #sidebar>
<slot name="sidebar" :editorService="editorService"> <slot name="sidebar" :editorService="editorService">
<sidebar :data="sidebar"></sidebar> <sidebar :data="sidebar">
<template #layer-panel>
<slot name="layer-panel"></slot>
</template>
<template #component-list-panel>
<slot name="component-list-panel"></slot>
</template>
</sidebar>
</slot> </slot>
</template> </template>
@ -20,8 +28,8 @@
</slot> </slot>
</template> </template>
<template #propsPanel> <template #props-panel>
<slot name="propsPanel"> <slot name="props-panel">
<props-panel ref="propsPanel" @mounted="(instance) => $emit('props-panel-mounted', instance)"></props-panel> <props-panel ref="propsPanel" @mounted="(instance) => $emit('props-panel-mounted', instance)"></props-panel>
</slot> </slot>
</template> </template>

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

@ -26,7 +26,7 @@
<div class="m-editor-framework-right" :style="`width: ${columnWidth?.right}px`"> <div class="m-editor-framework-right" :style="`width: ${columnWidth?.right}px`">
<el-scrollbar> <el-scrollbar>
<slot name="propsPanel"></slot> <slot name="props-panel"></slot>
</el-scrollbar> </el-scrollbar>
</div> </div>
</template> </template>

1
packages/editor/src/layouts/sidebar/ComponentListPanel.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<el-scrollbar> <el-scrollbar>
<slot name="component-list-panel"></slot>
<el-collapse class="ui-component-panel" :model-value="collapseValue"> <el-collapse class="ui-component-panel" :model-value="collapseValue">
<el-input <el-input
prefix-icon="el-icon-search" prefix-icon="el-icon-search"

2
packages/editor/src/layouts/sidebar/LayerPanel.vue
View File

@ -1,5 +1,7 @@
<template> <template>
<el-scrollbar class="magic-editor-layer-panel"> <el-scrollbar class="magic-editor-layer-panel">
<slot name="layer-panel"></slot>
<el-input <el-input
class="filterInput" class="filterInput"
size="small" size="small"

10
packages/editor/src/layouts/sidebar/Sidebar.vue
View File

@ -6,7 +6,15 @@
type="card" type="card"
tab-position="left" tab-position="left"
> >
<tab-pane v-for="(item, index) in data.items" :key="index" :data="item"></tab-pane> <tab-pane v-for="(item, index) in data.items" :key="index" :data="item">
<template #layer-panel v-if="item === 'layer'">
<slot name="layer-panel"></slot>
</template>
<template #component-list-panel v-if="item === 'component-list'">
<slot name="component-list-panel"></slot>
</template>
</tab-pane>
</el-tabs> </el-tabs>
</template> </template>

8
packages/editor/src/layouts/sidebar/TabPane.vue
View File

@ -8,6 +8,14 @@
</template> </template>
<component :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}"> <component :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
<template #layer-panel v-if="data === 'layer'">
<slot name="layer-panel"></slot>
</template>
<template #component-list-panel v-if="data === 'component-list'">
<slot name="component-list-panel"></slot>
</template>
<template #layer-node-content="{ data, node }" v-if="config.slots?.layerNodeContent"> <template #layer-node-content="{ data, node }" v-if="config.slots?.layerNodeContent">
<component :is="config.slots?.layerNodeContent" :data="data" :node="node" /> <component :is="config.slots?.layerNodeContent" :data="data" :node="node" />
</template> </template>