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使用引用库内容请搜索趣讯吧以前的文章或继续浏览下面的相关文章希望大家以后多多支持趣讯吧!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至 55@qq.com 举报,一经查实,本站将立刻删除。转转请注明出处:https://www.szhjjp.com/n/3128.html