|
|
@ -20,12 +20,12 @@ import { |
|
|
|
onMounted, |
|
|
|
onMounted, |
|
|
|
onUnmounted, |
|
|
|
onUnmounted, |
|
|
|
PropType, |
|
|
|
PropType, |
|
|
|
nextTick, |
|
|
|
|
|
|
|
ref, |
|
|
|
ref, |
|
|
|
watch |
|
|
|
watch |
|
|
|
} from 'vue' |
|
|
|
} from 'vue' |
|
|
|
import { useFormItem } from 'naive-ui/es/_mixins' |
|
|
|
import { useFormItem } from 'naive-ui/es/_mixins' |
|
|
|
import { call } from 'naive-ui/es/_utils' |
|
|
|
import { call } from 'naive-ui/es/_utils' |
|
|
|
|
|
|
|
import {useThemeStore} from "@/store/theme/theme"; |
|
|
|
import * as monaco from 'monaco-editor' |
|
|
|
import * as monaco from 'monaco-editor' |
|
|
|
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker' |
|
|
|
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker' |
|
|
|
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker' |
|
|
|
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker' |
|
|
@ -83,30 +83,13 @@ export default defineComponent({ |
|
|
|
emits: ['change', 'focus', 'blur'], |
|
|
|
emits: ['change', 'focus', 'blur'], |
|
|
|
setup(props, ctx) { |
|
|
|
setup(props, ctx) { |
|
|
|
let editor = null as monaco.editor.IStandaloneCodeEditor | null |
|
|
|
let editor = null as monaco.editor.IStandaloneCodeEditor | null |
|
|
|
|
|
|
|
const themeStore = useThemeStore() |
|
|
|
|
|
|
|
const monacoEditorThemeRef = ref(themeStore.darkTheme ? 'vs-dark' : 'vs') |
|
|
|
const editorRef = ref() |
|
|
|
const editorRef = ref() |
|
|
|
|
|
|
|
|
|
|
|
const getValue = () => editor?.getValue() |
|
|
|
const getValue = () => editor?.getValue() |
|
|
|
|
|
|
|
|
|
|
|
const formItem = useFormItem({}) |
|
|
|
const formItem = useFormItem({}) |
|
|
|
|
|
|
|
|
|
|
|
watch( |
|
|
|
const initMonacoEditor = () => { |
|
|
|
() => props.value, |
|
|
|
|
|
|
|
(val) => { |
|
|
|
|
|
|
|
if (val !== getValue()) { |
|
|
|
|
|
|
|
editor?.setValue(val) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
watch( |
|
|
|
|
|
|
|
() => formItem.mergedDisabledRef.value, |
|
|
|
|
|
|
|
(value) => { |
|
|
|
|
|
|
|
editor?.updateOptions({ readOnly: value }) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(async () => { |
|
|
|
|
|
|
|
await nextTick() |
|
|
|
|
|
|
|
const dom = editorRef.value |
|
|
|
const dom = editorRef.value |
|
|
|
if (dom) { |
|
|
|
if (dom) { |
|
|
|
editor = monaco.editor.create(dom, { |
|
|
|
editor = monaco.editor.create(dom, { |
|
|
@ -114,7 +97,8 @@ export default defineComponent({ |
|
|
|
readOnly: formItem.mergedDisabledRef.value || props.options?.readOnly, |
|
|
|
readOnly: formItem.mergedDisabledRef.value || props.options?.readOnly, |
|
|
|
value: props.defaultValue ?? props.value, |
|
|
|
value: props.defaultValue ?? props.value, |
|
|
|
language: props.language, |
|
|
|
language: props.language, |
|
|
|
automaticLayout: true |
|
|
|
automaticLayout: true, |
|
|
|
|
|
|
|
theme: monacoEditorThemeRef.value |
|
|
|
}) |
|
|
|
}) |
|
|
|
editor.onDidChangeModelContent(() => { |
|
|
|
editor.onDidChangeModelContent(() => { |
|
|
|
const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props |
|
|
|
const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props |
|
|
@ -136,12 +120,39 @@ export default defineComponent({ |
|
|
|
formItem.nTriggerFormFocus() |
|
|
|
formItem.nTriggerFormFocus() |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => initMonacoEditor()) |
|
|
|
|
|
|
|
|
|
|
|
onUnmounted(() => { |
|
|
|
onUnmounted(() => { |
|
|
|
editor?.dispose() |
|
|
|
editor?.dispose() |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
watch( |
|
|
|
|
|
|
|
() => props.value, |
|
|
|
|
|
|
|
(val) => { |
|
|
|
|
|
|
|
if (val !== getValue()) { |
|
|
|
|
|
|
|
editor?.setValue(val) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
watch( |
|
|
|
|
|
|
|
() => formItem.mergedDisabledRef.value, |
|
|
|
|
|
|
|
(value) => { |
|
|
|
|
|
|
|
editor?.updateOptions({ readOnly: value }) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
watch( |
|
|
|
|
|
|
|
() => themeStore.darkTheme, |
|
|
|
|
|
|
|
() => { |
|
|
|
|
|
|
|
editor?.dispose() |
|
|
|
|
|
|
|
monacoEditorThemeRef.value = themeStore.darkTheme ? 'vs-dark' : 'vs' |
|
|
|
|
|
|
|
initMonacoEditor() |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
ctx.expose({ getValue }) |
|
|
|
ctx.expose({ getValue }) |
|
|
|
|
|
|
|
|
|
|
|
return { editorRef } |
|
|
|
return { editorRef } |
|
|
@ -155,7 +166,7 @@ export default defineComponent({ |
|
|
|
width: '100%', |
|
|
|
width: '100%', |
|
|
|
border: '1px solid #eee' |
|
|
|
border: '1px solid #eee' |
|
|
|
}} |
|
|
|
}} |
|
|
|
></div> |
|
|
|
/> |
|
|
|
) |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|