欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue使用引用库中的方法附源码

程序员文章站 2022-06-17 22:29:42
monaco-editor-vue的官方源码如下index.jsimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api';fun...

monaco-editor-vue的官方源码如下

index.js

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

function noop() { }

export { monaco };

export default {
  name: 'monacoeditor',
  props: {
    diffeditor: { type: boolean, default: false },      //是否使用diff模式
    width: {type: [string, number], default: '100%'},
    height: {type: [string, number], default: '100%'},
    original: string,       //只有在diff模式下有效
    value: string,
    language: {type: string, default: 'javascript'},
    theme: {type: string, default: 'vs'},
    options: {type: object, default() {return {};}},
    editormounted: {type: function, default: noop},
    editorbeforemount: {type: function, default: noop}
  },

  watch: {
    options: {
      deep: true,
      handler(options) {
        this.editor && this.editor.updateoptions(options);
      }
    },

    value() {
      this.editor && this.value !== this._getvalue() && this._setvalue(this.value);
    },

    language() {
      if(!this.editor) return;
      if(this.diffeditor){      //diff模式下更新language
        const { original, modified } = this.editor.getmodel();
        monaco.editor.setmodellanguage(original, this.language);
        monaco.editor.setmodellanguage(modified, this.language);
      }else
        monaco.editor.setmodellanguage(this.editor.getmodel(), this.language);
    },

    theme() {
      this.editor && monaco.editor.settheme(this.theme);
    },

    style() {
      this.editor && this.$nexttick(() => {
        this.editor.layout();
      });
    }
  },

  computed: {
    style() {
      return {
        width: !/^\d+$/.test(this.width) ? this.width : `${this.width}px`,
        height: !/^\d+$/.test(this.height) ? this.height : `${this.height}px`
      }
    }
  },

  mounted () {
    this.initmonaco();
  },

  beforedestroy() {
    this.editor && this.editor.dispose();
  },

  render (h) {
    return (
      <div class="monaco_editor_container" style={this.style}></div>
    );
  },

  methods: {
    initmonaco() {
      const { value, language, theme, options } = this;
      object.assign(options, this._editorbeforemount());      //编辑器初始化前
      this.editor = monaco.editor[this.diffeditor ? 'creatediffeditor' : 'create'](this.$el, {
        value: value,
        language: language,
        theme: theme,
        ...options
      });
      this.diffeditor && this._setmodel(this.value, this.original);
      this._editormounted(this.editor);      //编辑器初始化后
    },

    _geteditor() {
      if(!this.editor) return null;
      return this.diffeditor ? this.editor.modifiededitor : this.editor;
    },

    _setmodel(value, original) {     //diff模式下设置model
      const { language } = this;
      const originalmodel = monaco.editor.createmodel(original, language);
      const modifiedmodel = monaco.editor.createmodel(value, language);
      this.editor.setmodel({
        original: originalmodel,
        modified: modifiedmodel
      });
    },

    _setvalue(value) {
      let editor = this._geteditor();
      if(editor) return editor.setvalue(value);
    },

    _getvalue() {
      let editor = this._geteditor();
      if(!editor) return '';
      return editor.getvalue();
    },

    _editorbeforemount() {
      const options = this.editorbeforemount(monaco);
      return options || {};
    },

    _editormounted(editor) {
      this.editormounted(editor, monaco);
      if(this.diffeditor){
        editor.ondidupdatediff((event) => {
          const value = this._getvalue();
          this._emitchange(value, event);
        });
      }else{
        editor.ondidchangemodelcontent(event => {
          const value = this._getvalue();
          this._emitchange(value, event);
        });
      }
    },

    _emitchange(value, event) {
      this.$emit('change', value, event);
      this.$emit('input', value);
    }
  }
}

使用了vue想使用如上库中的_getvalue方法怎么调呢?

定义ref=“”,使用this.$refs.exampleeditor._setvalue('')

参考如下代码

test.vue

<template>
  <div>
    <monacoeditor ref="exampleeditor" width="100%" height="300" theme="vs-dark" language="javascript" :options="options" @change="codeinput" />
  </div>
</template>
<script>
import monacoeditor from 'monaco-editor-vue'
export default {
  components: {
    monacoeditor
  },
  data() {
    return {
    }
  },
  beforecreate() {
  },

  mounted() {
  },
  methods: {
    this.$refs.exampleeditor._setvalue('')
  }
}

到此这篇关于vue使用引用库中的方法附源码的文章就介绍到这了,更多相关vue使用引用库内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

相关标签: vue 引用库