2021-03-24

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>