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

feat(editor): 代码块功能新增slot

Browse Source
This commit is contained in:
parisma 2022-09-07 16:38:10 +08:00 committed by jia000
parent 2a8cfe58c4
commit 452c80d829
5 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,6 +26,10 @@
<template #code-block-panel-header> <template #code-block-panel-header>
<slot name="code-block-panel-header"></slot> <slot name="code-block-panel-header"></slot>
</template> </template>
<template #code-block-panel-tool>
<slot name="code-block-panel-tool"></slot>
</template>
</sidebar> </sidebar>
</slot> </slot>
</template> </template>

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

@ -26,6 +26,10 @@
<template #code-block-panel-header v-if="item === 'code-block'"> <template #code-block-panel-header v-if="item === 'code-block'">
<slot name="code-block-panel-header"></slot> <slot name="code-block-panel-header"></slot>
</template> </template>
<template #code-block-panel-tool v-if="item === 'code-block'">
<slot name="code-block-panel-tool"></slot>
</template>
</tab-pane> </tab-pane>
</el-tabs> </el-tabs>
</template> </template>

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

@ -35,6 +35,11 @@
<component v-else-if="config.slots?.codeBlockPanelHeader" :is="config.slots.codeBlockPanelHeader" /> <component v-else-if="config.slots?.codeBlockPanelHeader" :is="config.slots.codeBlockPanelHeader" />
</template> </template>
<template #code-block-panel-tool v-if="data === 'code-block' || config.slots?.codeBlockPanelTool">
<slot v-if="data === 'code-block'" name="code-block-panel-tool"></slot>
<component v-else-if="config.slots?.codeBlockPanelTool" :is="config.slots.codeBlockPanelTool" />
</template>
<template <template
#layer-node-content="{ data: nodeData, node }" #layer-node-content="{ data: nodeData, node }"
v-if="data === 'layer' || config.slots?.layerNodeContent" v-if="data === 'layer' || config.slots?.layerNodeContent"

22
packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
View File

@ -1,19 +1,23 @@
<template> <template>
<div class="m-editor-code-block-list"> <div class="m-editor-code-block-list">
<slot name="code-block-panel-header"></slot> <slot name="code-block-panel-header">
<div class="create-code-button"> <div class="create-code-button">
<el-button type="primary" size="small" @click="createCodeBlock">新增代码块</el-button> <el-button type="primary" size="small" @click="createCodeBlock">新增代码块</el-button>
</div> </div>
<el-divider class="divider" /> <el-divider class="divider" />
</slot>
<!-- 代码块列表 --> <!-- 代码块列表 -->
<div class="list-container" v-if="state.codeBlockMap"> <div class="list-container" v-if="state.codeBlockMap">
<div v-for="(value, key) in state.codeBlockMap" :key="key"> <div v-for="(value, key) in state.codeBlockMap" :key="key">
<div class="list-item"> <div class="list-item">
<div class="code-name">{{ value.name }}（{{ key }}）</div> <div class="code-name">{{ value.name }}（{{ key }}）</div>
<el-tooltip class="box-item" effect="dark" content="编辑代码" placement="top"> <div class="right-tool">
<el-icon class="edit-icon" @click="editCode(key)"><EditPen /></el-icon> <el-tooltip effect="dark" content="编辑代码" placement="top">
</el-tooltip> <el-icon class="edit-icon" @click="editCode(key)"><Edit /></el-icon>
</el-tooltip>
<slot name="code-block-panel-tool"></slot>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -25,7 +29,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { inject, reactive, watchEffect } from 'vue'; import { inject, reactive, watchEffect } from 'vue';
import { EditPen } from '@element-plus/icons-vue'; import { Edit } from '@element-plus/icons-vue';
import type { CodeBlockConfig, Services, State } from '../../../type'; import type { CodeBlockConfig, Services, State } from '../../../type';

9
packages/editor/src/theme/code-block.scss
View File

@ -16,11 +16,16 @@
.list-item { .list-item {
display: flex; display: flex;
align-items: center; align-items: center;
.edit-icon { .right-tool {
position: absolute; position: absolute;
right: 15px; right: 15px;
padding-left: 5px; padding-left: 5px;
background-color: #fff; background-color: #fff;
display: flex;
align-items: center;
.edit-icon {
padding: 0 5px;
}
} }
.code-name { .code-name {
font-size: 14px; font-size: 14px;
@ -28,7 +33,7 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 10px 15px; padding: 10px 15px;
margin-right: 15px; margin-right: 60px;
} }
} }
} }