monaco的vue中使用小计
code.vue //主页面
<template>
<div id="task-index">
<!--左边树-->
<file-edit :treeData="treeData"></file-edit>
</div>
</template>
<script>
// 导入一整块在线编辑
import FileEdit from '@/components/Monaco/file_edit'
import { dirEdit as getTaskDirTree } from '@/api/task'
export default {
name: 'TaskCode',
components: { FileEdit },
data() {
return {
treeData: []
}
},
created() {
this.task_id = this.$route.params.id
this.fetchData()
},
methods: {
// 拿左边树数据
fetchData() {
getTaskDirTree({ id: this.task_id }).then(response => {
this.treeData = response.data
this.listLoading = false
})
}
}
}
</script>
组件页面 file_edit.vue
<template>
<div id="task-index">
<el-container>
<!-- 左边树结构 -->
<el-aside style="margin-top: 20px" width="200px">
<el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</el-aside>
<!-- 右边代码编辑结构 -->
<el-main>
<monaco ref="monaco" :opts="opts" @change="changeValue"></monaco>
</el-main>
</el-container>
</div>
</template>
<script>
//获取文件和保存文件接口
import { getFileContent, saveFileContent } from '@/api/task'
//右侧代码编辑部分
import Monaco from '@/components/Monaco/index'
export default {
name: 'FileEdit',
components: { Monaco },
mounted() {
document.addEventListener('keydown', this.saveContent)
// 如果要自动保存
// this.timer = setInterval(() => {
// this.save('timer')
// }, 10 * 1000)
},
beforeDestroy() {
//监听保存快捷键
document.removeEventListener('keydown', this.saveContent)
// clearInterval(this.timer)
},
props: {
//树形结构由父组件传入
treeData: {
type: Array,
default() {
return []
}
}
},
data() {
return {
//树形结构声明
defaultProps: {
children: 'children',
label: 'label'
},
data: [],
opts: {}
}
},
created() {},
methods: {
saveContent(e) {
var key = window.event.keyCode ? window.event.keyCode : window.event.which;
var that = this;
if (key === 83 && e.ctrlKey) {
that.save('hot key')
e.preventDefault()
}
},
save(type) {
console.log(`content saved by ${type}`, this.loc)
if (this.loc !== undefined) {
this.content = this.$refs.monaco.getVal();
saveFileContent({loc: this.loc, content: this.content}).then(response => {
this.$message('保存成功')
})
}
},
//处理每次点击
handleNodeClick(data) {
if (data.href) {
this.load(data.href);
}
},
//载入文件
load(name) {
getFileContent({loc: name}).then(response => {
this.loc = name
this.$refs.monaco.setVal(response.data.content)
// this.content = response.data.content
})
},
//文件内容修改接受端
changeValue(val){
}
}
}
</script>
<template style="overflow: hidden">
<div ref="monaca" class="monaco-editor" :style="'height: '+height+'px'"></div>
</template>
<script>
import * as monaco from 'monaco-editor'
export default {
name: 'AcMonaco',
props: {
opts: {
type: Object,
default() {
return {}
}
},
height: {
type: Number,
default: 1000
},
width: {
type: Number,
default: 600
}
},
data() {
return {
// 主要配置
defaultOpts: {
value: '', // 编辑器的值
theme: 'vs-dark', // 编辑器主题:vs, hc-black, or vs-dark,更多选择详见官网
roundedSelection: false, // 右侧不显示编辑器预览框
autoIndent: true, // 自动缩进
language: 'python'
}
}
},
watch: {
opts: {
handler(n) {
this.init()
},
deep: true
}
},
mounted() {
this.init()
},
methods: {
init() {
// 初始化container的内容,销毁之前生成的编辑器
this.$refs.monaca.innerHTML = ''
this.editorOptions = Object.assign(this.defaultOpts, this.opts)
// 生成编辑器对象
this.monacoEditor = monaco.editor.create(this.$refs.monaca, this.editorOptions)
// 编辑器内容发生改变时触发
this.monacoEditor.onDidChangeModelContent(() => {
this.$emit('change', this.monacoEditor.getValue())
})
},
// 供父组件调用手动获取值
getVal() {
return this.monacoEditor.getValue()
},
// 供父组件调用手动获取值
setVal(str) {
console.log(str)
return this.monacoEditor.setValue(str)
}
}
}
</script>
<style>
.monaco-editor{
overflow: hidden;
}
</style>