feat: Configurable and compatible with keyPath changes
This commit is contained in:
parent
493b339a37
commit
029b227cde
|
@ -22,6 +22,14 @@ const props = defineProps({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
keyPath: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
rememberScroll: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits(['reset', 'input', 'save'])
|
const emit = defineEmits(['reset', 'input', 'save'])
|
||||||
|
@ -90,12 +98,14 @@ onMounted(async () => {
|
||||||
emit('save')
|
emit('save')
|
||||||
});
|
});
|
||||||
|
|
||||||
editorNode.onDidScrollChange((event) => {
|
if (props.rememberScroll) {
|
||||||
// 防止刷新时改变滚动距离
|
editorNode.onDidScrollChange((event) => {
|
||||||
if (!event.scrollHeightChanged) {
|
// Update scrolltop when scroll height changes, ie. content changes
|
||||||
scrollTop.value = event.scrollTop;
|
if (!event.scrollHeightChanged) {
|
||||||
}
|
scrollTop.value = event.scrollTop;
|
||||||
})
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// editorNode.onDidChangeModelLanguageConfiguration(() => {
|
// editorNode.onDidChangeModelLanguageConfiguration(() => {
|
||||||
// editorNode?.getAction('editor.action.formatDocument')?.run()
|
// editorNode?.getAction('editor.action.formatDocument')?.run()
|
||||||
|
@ -111,19 +121,33 @@ onMounted(async () => {
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.content,
|
() => props.content,
|
||||||
async (content) => {
|
async (content, oldContent, onCleanup) => {
|
||||||
if (editorNode != null) {
|
if (editorNode != null) {
|
||||||
editorNode.setValue(content)
|
editorNode.setValue(content)
|
||||||
editorNode.onDidLayoutChange(() => {
|
|
||||||
if (scrollTop.value > 0) {
|
const disposable = editorNode.onDidLayoutChange(() => {
|
||||||
|
if (props.rememberScroll && scrollTop.value > 0) {
|
||||||
editorNode.setScrollTop(scrollTop.value)
|
editorNode.setScrollTop(scrollTop.value)
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
|
onCleanup(() => disposable.dispose())
|
||||||
|
|
||||||
await nextTick(() => emit('reset', content))
|
await nextTick(() => emit('reset', content))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.keyPath,
|
||||||
|
() => {
|
||||||
|
if (editorNode != null) {
|
||||||
|
scrollTop.value = 0
|
||||||
|
editorNode.setScrollTop(0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => readonlyValue.value,
|
() => readonlyValue.value,
|
||||||
(readOnly) => {
|
(readOnly) => {
|
||||||
|
|
|
@ -175,6 +175,7 @@ const onSave = () => {
|
||||||
:border="true"
|
:border="true"
|
||||||
:content="displayValue"
|
:content="displayValue"
|
||||||
:language="viewLanguage"
|
:language="viewLanguage"
|
||||||
|
:keyPath="viewAs.field"
|
||||||
class="flex-item-expand"
|
class="flex-item-expand"
|
||||||
@input="onInput"
|
@input="onInput"
|
||||||
@reset="onInput"
|
@reset="onInput"
|
||||||
|
|
|
@ -149,6 +149,7 @@ defineExpose({
|
||||||
v-show="!props.loading"
|
v-show="!props.loading"
|
||||||
:content="displayValue"
|
:content="displayValue"
|
||||||
:loading="props.loading"
|
:loading="props.loading"
|
||||||
|
:keyPath="props.keyPath"
|
||||||
class="flex-item-expand"
|
class="flex-item-expand"
|
||||||
language="json"
|
language="json"
|
||||||
style="height: 100%"
|
style="height: 100%"
|
||||||
|
|
|
@ -204,6 +204,7 @@ defineExpose({
|
||||||
:content="displayValue"
|
:content="displayValue"
|
||||||
:language="viewLanguage"
|
:language="viewLanguage"
|
||||||
:loading="props.loading"
|
:loading="props.loading"
|
||||||
|
:keyPath="props.keyPath"
|
||||||
class="flex-item-expand"
|
class="flex-item-expand"
|
||||||
style="height: 100%"
|
style="height: 100%"
|
||||||
@input="onInput"
|
@input="onInput"
|
||||||
|
|
Loading…
Reference in New Issue