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

当vue使用库中的getvalue方法时,需要调用相关方法,通过定义ref=“”,使用this.$refs.exampleEditor._setValue(\’\’),具体示例代码参考下本文,对vue使用引用库中的方法,感兴趣的朋友一起看看吧

vue使用引用库中的方法附源码,恰卡网带你了解更多相关信息。

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 (      <p class=\"monaco_editor_container\" style={this.style}></p>    );  },  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>  <p>    <MonacoEditor ref=\"exampleEditor\" width=\"100%\" height=\"300\" theme=\"vs-dark\" language=\"javascript\" :options=\"options\" @change=\"codeInput\" />  </p></template><script>import MonacoEditor from \'monaco-editor-vue\'export default {  components: {    MonacoEditor  },  data() {    return {    }  },  beforeCreate() {  },  mounted() {  },  methods: {    this.$refs.exampleEditor._setValue(\'\')  }}

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至 203304862@qq.com 举报,一经查实,本站将立刻删除。转转请注明出处:https://www.szhjjp.com/n/3128.html

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注