feat: editor 调整

src/components/MonacoEditor/index.vue

@@ -36,30 +36,30 @@ const _setValue = (value: string) => {
 }
 onMounted(() => {
 	const _editor = monaco.editor.create(monacoRef.value, {
-		// value: props.modelValue, // ``,
-		value: 'function hello() {\n  alert(\'Hello world!\');\n}', // ``,
+		value: props.modelValue,
 		language: props.language,
-		// theme: 'vs-dark'
-		theme: props.theme
+		theme: props.theme,
+		automaticLayout: true
 	})
 	editor.value = _editor
 	_editor.onDidChangeModelContent(event => {
-		const value = _editor.getValue()
-		console.error(event, 'change......', value)
-		// if (props.modelValue !== value) {
-		// 	emits('change', value, event)
-		// 	emits('update:modelValue', value)
-		// }
+		const curValue = _editor?.getValue()
+		if (props.modelValue !== curValue) {
+			// console.warn(curValue === props.modelValue, 'dddd 更新')
+			// local_value.value = value
+			emits('change', curValue, event)
+			// emits('update:modelValue', curValue)
+		}
 	})
 	emits('editorDidMount', _editor)
 })
 watch(
 	() => props.modelValue,
 	(value: string) => {
-		console.error('modelValue ////', props.modelValue, _getValue())
+		console.error('modelValue ////', value, _getValue())
 		// debugger
 		if (value !== _getValue()) {
-			_setValue(value)
+			_setValue(value || '')
 		}
 	}
 )
@@ -81,28 +81,33 @@ onBeforeUnmount(() => {
 		editor.value.dispose()
 	}
 })
+defineExpose({
+	getValue: _getValue
+})
 </script>
 <style lang="scss">
 .le-monaco-editor {
 	width: 100%;
 	height: 100%;
 	min-height: 160px;
+	border: 1px solid var(--el-border-color-light);
+	border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+	&:hover {
+		border: 1px solid var(--el-input-hover-border-color);
+	}
 	.monaco-editor {
 		height: 100%;
-		//border-radius: var(--n-border-radius)!important
-		.overflow-guard {
-			//border-radius: var(--n-border-radius)!important
-		}
 		.decorationsOverviewRuler,
 		.scrollbar,
 		.slider {
 			border: 0 !important;
 			width: 6px !important;
-			color: #00000080 !important;
+			color: var(--el-text-color-primary) !important;
 			border-radius: 6px !important;
 		}
-		.scroll-decoration {
-			//box-shadow: none!important
+		.decorationsOverviewRuler,
+		.minimap-decorations-layer {
+			//height: 100% !important;
 		}
 	}
 }