vue使用引用庫中的方法附源碼

第vue使用引用庫中的方法附源碼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.editorthis.editor.updateOptions(options);

value(){

this.editorthis.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.editormonaco.editor.setTheme(this.theme);

style(){

this.editorthis.$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.editorthis.editor.dispose();

render(h){

return(

div'createDiffEditor':'create'](this.$el,{

value:value,

language:language,

theme:theme,

...options

this.diffEditorthis._setModel(this.value,this.original);

this._editorMounted(this.editor);//編輯器初始化后

_getEditor(){

if(!this.editor)returnnull;

returnthis.diffEditorthis.editor.modifiedEditor:this.editor;

_setModel(value,original){//diff模式下設(shè)置model

const{language}=this;

constoriginalModel=monaco.editor.createModel(original,language);

constmodifiedModel=monaco.editor.createModel(value,language);

this.editor.setModel({

original:originalModel,

modified:modifiedModel

_setValue(value){

leteditor=this._getEditor();

if(editor)returneditor.setValue(value);

_getValue(){

leteditor=this._getEditor();

if(!editor)return'';

returneditor.getValue();

_editorBeforeMount(){

constoptions=this.editorBeforeMount(monaco);

returnoptions||{};

_editorMounted(editor){

this.editorMounted(editor,monaco);

if(this.diffEditor){

editor.onDidUpdateDiff((event)={

constvalue=this._getValue();

this._emitChange(value,event);

}else{

editor.onDidChangeModelContent(event={

constvalue=this._getValue();

this._emitChange(value,event);

_emitChange(value,event){

this.$emit('change',value,event);

this.$emit('input',value);

}

使用了vue想使用如上庫中的_getValue方法怎么調(diào)呢？

定義ref=“”，使用this.$refs.exampleEditor._setValue('')

參考如下代碼

test.vue

template

div

MonacoEditorref="exampleEditor"width="100%"height="300"theme="vs-dark"language="javascript":options="options"@change="codeInput"/

/div

/template

script

importMonacoEditorfrom'monaco-editor-vu