pref: MonacoEditor 支持 disabled & styles

src/components/MonacoEditor/index.vue

@@ -44,6 +44,10 @@ const props = defineProps({
 		default: 'javascript'
 		// default: 'verilog'
 	},
+	disabled: {
+		type: Boolean,
+		default: false
+	},
 	modelValue: {
 		type: String,
 		default: ''
@@ -63,6 +67,7 @@ onMounted(() => {
 		value: props.modelValue,
 		language: props.language,
 		theme: props.theme,
+		readOnly: props.disabled,
 		automaticLayout: true,
 		wordWrap: 'on'
 	})
@@ -70,10 +75,8 @@ onMounted(() => {
 	_editor.onDidChangeModelContent(event => {
 		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('update:modelValue', curValue)
 		}
 	})
 	emits('editorDidMount', _editor)
@@ -81,8 +84,7 @@ onMounted(() => {
 watch(
 	() => props.modelValue,
 	(value: string) => {
-		console.error('modelValue ////', value, _getValue())
-		// debugger
+		// console.error('modelValue ////', value, _getValue())
 		if (value !== _getValue()) {
 			_setValue(value || '')
 		}
@@ -91,10 +93,16 @@ watch(
 watch(
 	() => props.language,
 	(lang: string) => {
-		console.error('watch', lang)
+		// console.error('watch', lang)
 		monaco.editor.setModelLanguage(editor.value.getModel(), lang)
 	}
 )
+watch(
+	() => props.disabled,
+	(readOnly: boolean) => {
+		editor.value.updateOptions({ readOnly })
+	}
+)
 watch(
 	() => props.theme,
 	(theme: string) => {
@@ -115,9 +123,11 @@ defineExpose({
 	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));
+	border-radius: var(--el-border-radius-base);
+	padding: var(--el-border-radius-base) 0;
 	&:hover {
-		border: 1px solid var(--el-input-hover-border-color);
+		border: 1px solid var(--el-color-primary);
+		border-radius: var(--el-border-radius-base);
 	}
 	.monaco-editor {
 		height: 100%;