JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-09-12 22:40:21 +08:00
Code Issues Projects Releases Wiki Activity

feat(editor): 代码编辑支持全屏

Browse Source
This commit is contained in:
parisma 2022-11-16 12:05:02 +08:00
parent 4e182e5f6e
commit 8271a3b497
3 changed files with 33 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/editor/src/components/CodeDraftEditor.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="m-editor-wrapper"> <div class="m-editor-wrapper" :class="isFullScreen ? 'fullScreen' : 'normal'">
<magic-code-editor <magic-code-editor
ref="codeEditor" ref="codeEditor"
class="m-editor-container" class="m-editor-container"
@ -9,10 +9,16 @@
:options="codeOptions" :options="codeOptions"
></magic-code-editor> ></magic-code-editor>
<div class="m-editor-content-bottom" v-if="editable"> <div class="m-editor-content-bottom" v-if="editable">
<TMagicButton type="primary" class="button" @click="toggleFullScreen">
{{ isFullScreen ? '退出全屏' : '全屏' }}</TMagicButton
>
<TMagicButton type="primary" class="button" @click="saveCode">保存</TMagicButton> <TMagicButton type="primary" class="button" @click="saveCode">保存</TMagicButton>
<TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton> <TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton>
</div> </div>
<div class="m-editor-content-bottom" v-else> <div class="m-editor-content-bottom" v-else>
<TMagicButton type="primary" class="button" @click="toggleFullScreen">
{{ isFullScreen ? '退出全屏' : '全屏' }}</TMagicButton
>
<TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton> <TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton>
</div> </div>
</div> </div>
@ -57,6 +63,7 @@ const editorContent = ref<string>('');
const codeEditor = ref<InstanceType<typeof MagicCodeEditor>>(); const codeEditor = ref<InstanceType<typeof MagicCodeEditor>>();
// 原始代码内容 // 原始代码内容
const originCodeContent = ref<string>(''); const originCodeContent = ref<string>('');
const isFullScreen = ref<boolean>(false);
const codeOptions = computed(() => ({ const codeOptions = computed(() => ({
...props.codeOptions, ...props.codeOptions,
@ -127,4 +134,12 @@ const close = async () => {
emit('close'); emit('close');
} }
}; };
// 切换全屏
const toggleFullScreen = () => {
isFullScreen.value = !isFullScreen.value;
if (codeEditor.value) {
codeEditor.value.focus();
}
};
</script> </script>

1
packages/editor/src/components/FunctionEditor.vue
View File

@ -46,6 +46,7 @@ const tableConfig = {
border: true, border: true,
enableFullscreen: false, enableFullscreen: false,
name: 'params', name: 'params',
maxHeight: '150px',
items: [ items: [
{ {
type: 'text', type: 'text',

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

@ -78,6 +78,11 @@
.m-fields-code-select { .m-fields-code-select {
width: 100%; width: 100%;
} }
.el-dialog.is-fullscreen.code-editor-dialog {
overflow: hidden;
}
.code-editor-dialog { .code-editor-dialog {
.el-dialog__body { .el-dialog__body {
height: 90%; height: 90%;
@ -149,7 +154,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 4px; left: 4px;
width: 100%; width: calc(100% - 9px);
height: 100%; height: 100%;
z-index: 10; z-index: 10;
background: #fff; background: #fff;
@ -160,8 +165,16 @@
.m-editor-wrapper { .m-editor-wrapper {
height: 100%; height: 100%;
&.fullScreen {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
.m-editor-container { .m-editor-container {
height: calc(100% - 65px); height: calc(100% - 45px);
} }
.m-editor-content-bottom { .m-editor-content-bottom {
height: 45px; height: 45px;
@ -174,7 +187,7 @@
bottom: 0; bottom: 0;
> button { > button {
height: 30px; height: 30px;
margin-top: 15px; margin-top: 5px;
} }
} }
} }