fix: monaco editor can not adjust height when parent node's size changes from large to small

This commit is contained in:
Lykin 2023-12-11 18:32:16 +08:00
parent ac76131f18
commit e942f41f66
2 changed files with 20 additions and 5 deletions

View File

@ -152,7 +152,9 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<div ref="editorRef" :class="{ 'editor-border': props.border === true }" /> <div :class="{ 'editor-border': props.border === true }" style="position: relative">
<div ref="editorRef" class="editor-inst" />
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -162,4 +164,12 @@ onUnmounted(() => {
padding: 3px; padding: 3px;
box-sizing: border-box; box-sizing: border-box;
} }
.editor-inst {
position: absolute;
top: 2px;
bottom: 2px;
left: 2px;
right: 2px;
}
</style> </style>

View File

@ -157,8 +157,8 @@ const onSave = () => {
<template> <template>
<div v-show="show" class="entry-editor flex-box-v"> <div v-show="show" class="entry-editor flex-box-v">
<n-card :title="$t('interface.edit_row')" autofocus size="small" style="height: 100%"> <n-card :title="$t('interface.edit_row')" autofocus class="flex-item-expand" size="small">
<div class="editor-content flex-box-v" style="height: 100%"> <div class="editor-content flex-box-v flex-item-expand">
<!-- field --> <!-- field -->
<div class="editor-content-item flex-box-v"> <div class="editor-content-item flex-box-v">
<div class="editor-content-item-label">{{ props.fieldLabel }}</div> <div class="editor-content-item-label">{{ props.fieldLabel }}</div>
@ -180,7 +180,6 @@ const onSave = () => {
:language="viewLanguage" :language="viewLanguage"
:show-line-num="prefStore.showLineNum" :show-line-num="prefStore.showLineNum"
class="flex-item-expand" class="flex-item-expand"
style="height: 100%"
@input="onInput" @input="onInput"
@reset="onInput" @reset="onInput"
@save="onSave" /> @save="onSave" />
@ -248,7 +247,7 @@ const onSave = () => {
} }
&-label { &-label {
line-height: 1.25; height: 18px;
color: v-bind('themeVars.textColor3'); color: v-bind('themeVars.textColor3');
font-size: 13px; font-size: 13px;
padding: 5px 0; padding: 5px 0;
@ -260,6 +259,12 @@ const onSave = () => {
} }
} }
:deep(.n-card__content) {
display: flex;
flex-direction: column;
flex-grow: 1;
}
:deep(.n-card__action) { :deep(.n-card__action) {
padding: 5px 10px; padding: 5px 10px;
background-color: unset; background-color: unset;