<wzy-monaco-editor language="sql" :height="470" code="select id id from tb_app group by id"/>
<template>
<div
class="monaco-editor-container"
:style="{ height: `${height}px` }"
ref="container"
></div>
</template>
<script>
import * as monaco from "monaco-editor";
export default {
name: "MyCodeEditor",
props: {
// 高度
height: {
type: Number,
default: 300,
},
// 代码
code: String,
language: {
type: String,
default: "json",
},
// 禁用
readonly: {
type: Boolean,
default: false,
},
},
data() {
return {
theme: "vs-dark",
monacoEditor: undefined,
};
},
created() {
this.initEditor();
},
methods: {
initEditor() {
this.$nextTick(() => {
this.monacoEditor = monaco.editor.create(this.$refs.container, {
value: this.code,
readOnly: this.readonly,
theme: this.theme,
language: this.language,
automaticLayout: true,
});
});
},
getVal(){
return this.monacoEditor.getValue();
}
},
watch: {
code(val) {
this.monacoEditor.setValue(val);
},
},
};
</script>
<style scoped lang="scss">
.monaco-editor-container {
width: 100%;
overflow: hidden;
}
</style>
