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模式下更新languageconst { original, modified } = this.editor.getModel(); monaco.editor.setModelLanguage(original, this.language); monaco.editor.setModelLanguage(modified, this.language); }elsemonaco.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 (); },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模式下设置modelconst { 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 = https://www.it610.com/article/this._getValue(); this._emitChange(value, event); }); }else{editor.onDidChangeModelContent(event => {const value = https://www.it610.com/article/this._getValue(); this._emitChange(value, event); }); }},_emitChange(value, event) {this.$emit('change', value, event); this.$emit('input', value); }}}

【vue使用引用库中的方法附源码】使用了vue想使用如上库中的_getValue方法怎么调呢？
定义ref=“”，使用this.$refs.exampleEditor._setValue('')
参考如下代码
test.vue

import MonacoEditor from 'monaco-editor-vue'export default {components: {MonacoEditor},data() {return {}},beforeCreate() {},mounted() {},methods: {this.$refs.exampleEditor._setValue('')}}

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