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 (<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模式下设置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.yf-zs.com/shenghuo/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使用引用库中的方法附源码的文章就介绍到这了,更多相关vue使用引用库内容请搜索趣讯吧以前的文章或继续浏览下面的相关文章希望大家以后多多支持趣讯吧！

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

推荐阅读

豆干条怎么炒

娇韵诗妊娠纹霜搓泥原因及应对办法都在这

女生酷帅衣服搭配图夏天

胃出血的急救

球铁和铸铁有什么区别

微信换电话多久可以加好友啊

创新不辍下一句

托托克海潮森林闪退

杜甫阁夜的主旨句是哪一句

做柜子用什么板材好

放羊的星星有没有戚薇

这些主食、水果、肉和蔬菜也非常适合月子里的宝妈吃

lamriger是什么牌子

白啤为什么叫白啤

a小调的主音是什么

梭子蟹可以放几天

女人如何养生可食用滋补肾阴药物

好的剃须刀如何选购刀

mountainwarehouse是什么品牌

女性出现小肚子左边疼是什么原因