其他分享
首页 > 其他分享> > 在vue项目中使用MonacoEditor显示后端返回不通类型的接口数据

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

作者:互联网

实际运用场景:

在接口数据列表中,需要对接口数据增删改查,使用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一样

标签:vue,val,value,content,接口,monaco,editor,MonacoEditor,monacoEditor
来源: https://www.cnblogs.com/dzyany/p/14823518.html