在vue项目中使用MonacoEditor显示后端返回不通类型的接口数据

Posted 2021-05-29 dzyany

实际运用场景：

在接口数据列表中，需要对接口数据增删改查，使用Monaco也是因为它支持多种语法，有高亮校验语法错误的功能。

安装

npm install monaco-editor@0.24.0

npm install monaco-editor-webpack-plugin --save //这个必须安装，不然起不来

配置

在vue.config.js中

const MonacoWebpackPlugin = require(\'monaco-editor-webpack-plugin\'); // 第1 引用
module.exports = {
chainWebpack(config) {
  config.plugin(\'monaco\').use(new MonacoWebpackPlugin()) // 第2 使用
}
}

新建组件

该组件运用了父到子、子到父的传值

新建文件\\MonacoEditor\\index.vue

<template>
  <div ref="container" :style="{\'height\': height + \'px !important\'}"></div>
</template>
 
<script>
import * as monaco from "monaco-editor";
export default {
     props:  {
        /* 编辑器的内容 */
        value: {
            type: String,
            default: "",
        },
        height:{ // 编辑器高度
            type: Number,
            default: 260,
        },
        dialogIsOpen:{
          type: Boolean,
          default: false,
        },
        templateType:{ // 数据类型
          type: String,
          default: "1",
        },
        readOnly:{  //只读
          type: Boolean,
          default: false
        }
    },
  data() {
    return {
      monacoEditor: {},
      content: this.value,
      isSave:true,//文件改动状态，是否保存
      oldValue:\'\', //保存后的文本
      open: true,
    };
  },
watch:{
    value(val){
      this.content = this.value;
    },
    content(newVal, oldVal){ // 子到父传值
      this.$emit("update:value", newVal);
    },
    templateType(val){
      if(!this.readOnly){
        if(val != "1"){
        this.destroyEditor() //销毁
        this.intEditor(this.content) // 从新初始化
        this.monacoEditor.onKeyUp(() => {
            this.content = this.monacoEditor.getValue()
        });
      }

      }
      
    },
    dialogIsOpen(val){ 
      if(this.readOnly){
       if(val){ // 对话框打开，初始化控件
        this.intEditor(this.content)
        this.monacoEditor.onKeyUp(() => {
            this.content = this.monacoEditor.getValue()
        });
      }else{ // 对话框打开，初始化控件
        this.destroyEditor()
      }
      }
    }
},

  mounted() {
    this.intEditor(this.content)
    this.monacoEditor.onKeyUp(() => {
        this.content = this.monacoEditor.getValue()
        // 当键盘按下，判断当前编辑器文本与已保存的编辑器文本是否一致
        if(this.monacoEditor.getValue() != this.content){
            this.isSave = false;
        }
    });
  },

  methods: {
    changeEditor() {
      // 更改editor内容
      this.content = this.monacoEditor.setValue(result.data);
      this.monacoEditor.getAction("editor.action.formatDocument")._run();
    },
    intEditor(val){
      // 初始化编辑器，确保dom已经渲染，dialog中要写在opened中
      this.monacoEditor = monaco.editor.create(this.$refs.container, {
        value: val,
        readOnly: this.readOnly,
        language: this.templateType,
        theme: "vs-dark",
      });
    },
   // 销毁编辑器
    destroyEditor() {
      this.monacoEditor.dispose();
    },
  },
};
</script>

应用组件

<el-form-item label="模板内容" prop="templateContent">
  <MonacoEditor ref="myRef"
    :value.sync = "templateForm.templateContent" 
    :listenToChild = "getChildMsg"
    :height = "420" 
    :dialogIsOpen = "templateOpen"
    :templateType = "templateForm.templateType"
    ></MonacoEditor>
</el-form-item>

**控件第一次使用，也只能将就，路过的，如果遇到更好的使用方法，麻烦分享一下，谢谢**

如何更新组件值得同时更新父组件

1. 在动态绑定的值，例如value，后面加上.sync

2. 在watch 中监听value,如下

   watch:{
       value(val){
         this.content = this.value;
       },
       content(newVal, oldVal){ // 子到父传值
         this.$emit("update:value", newVal);
       },
   }
   

3. 使用this.$emit("update:value", newVal);就可以做到实时更新，效果跟v-model一样