Skip to content

V
vue-monaco
Commit d8153f9d authored by rockyl's avatar rockyl
Browse files
Options

original监听

parent 13de23ce
Hide whitespace changes
Inline Side-by-side
Showing with 166 additions and 144 deletions
dist/vue-monaco.es.js
View file @ d8153f9d
...@@ -54,6 +54,13 @@ var MonacoEditor = { ...@@ -54,6 +54,13 @@ var MonacoEditor = {
if (this.editor) { if (this.editor) {
this.monaco.editor.setTheme(newVal); this.monaco.editor.setTheme(newVal);
} }
},
original: function original(newVal) {
if (this.editor) {
var editor = this.getEditor();
var model = editor.getModel();
model.original.setValue(newVal);
}
} }
}, },
mounted: function mounted() { mounted: function mounted() {
......
dist/vue-monaco.js
View file @ d8153f9d
...@@ -76,6 +76,13 @@ ...@@ -76,6 +76,13 @@
if (this.editor) { if (this.editor) {
this.monaco.editor.setTheme(newVal); this.monaco.editor.setTheme(newVal);
} }
},
original: function original(newVal) {
if (this.editor) {
var editor = this.getEditor();
var model = editor.getModel();
model.original.setValue(newVal);
}
} }
}, },
mounted: function mounted() { mounted: function mounted() {
......
src/MonacoEditor.js
View file @ d8153f9d
import assign from 'nano-assign' import assign from 'nano-assign'
export default { export default {
name: 'MonacoEditor', name: 'MonacoEditor',
props: { props: {
original: String, original: String,
value: { value: {
type: String, type: String,
required: true required: true
}, },
theme: { theme: {
type: String, type: String,
default: 'vs' default: 'vs'
}, },
language: String, language: String,
options: Object, options: Object,
amdRequire: { amdRequire: {
type: Function type: Function
}, },
diffEditor: { diffEditor: {
type: Boolean, type: Boolean,
default: false default: false
} }
}, },
model: { model: {
event: 'change' event: 'change'
}, },
watch: { watch: {
options: { options: {
deep: true, deep: true,
handler(options) { handler(options) {
if (this.editor) { if (this.editor) {
const editor = this.getModifiedEditor() const editor = this.getModifiedEditor()
editor.updateOptions(options) editor.updateOptions(options)
} }
} }
}, },
value(newValue) { value(newValue) {
if (this.editor) { if (this.editor) {
const editor = this.getModifiedEditor() const editor = this.getModifiedEditor();
if (newValue !== editor.getValue()) { if (newValue !== editor.getValue()) {
editor.setValue(newValue) editor.setValue(newValue)
} }
} }
}, },
language(newVal) { language(newVal) {
if (this.editor) { if (this.editor) {
const editor = this.getModifiedEditor() const editor = this.getModifiedEditor();
this.monaco.editor.setModelLanguage(editor.getModel(), newVal) this.monaco.editor.setModelLanguage(editor.getModel(), newVal)
} }
}, },
theme(newVal) { theme(newVal) {
if (this.editor) { if (this.editor) {
this.monaco.editor.setTheme(newVal) this.monaco.editor.setTheme(newVal)
} }
} },
},
original(newVal) {
mounted() { if (this.editor) {
if (this.amdRequire) { const editor = this.getEditor();
this.amdRequire(['vs/editor/editor.main'], () => { let model = editor.getModel();
this.monaco = window.monaco model.original.setValue(newVal);
this.initMonaco(window.monaco) }
}) }
} else { },
// ESM format so it can't be resolved by commonjs `require` in eslint
// eslint-disable-next-line import/no-unresolved mounted() {
const monaco = require('monaco-editor') if (this.amdRequire) {
this.monaco = monaco this.amdRequire(['vs/editor/editor.main'], () => {
this.initMonaco(monaco) this.monaco = window.monaco
} this.initMonaco(window.monaco)
}, })
} else {
beforeDestroy() { // ESM format so it can't be resolved by commonjs `require` in eslint
this.editor && this.editor.dispose() // eslint-disable-next-line import/no-unresolved
}, const monaco = require('monaco-editor')
this.monaco = monaco
methods: { this.initMonaco(monaco)
initMonaco(monaco) { }
this.$emit('editorWillMount', this.monaco) },
const options = assign( beforeDestroy() {
{ this.editor && this.editor.dispose()
value: this.value, },
theme: this.theme,
language: this.language methods: {
}, initMonaco(monaco) {
this.options this.$emit('editorWillMount', this.monaco)
)
const options = assign(
if (this.diffEditor) { {
this.editor = monaco.editor.createDiffEditor(this.$el, options) value: this.value,
const originalModel = monaco.editor.createModel( theme: this.theme,
this.original, language: this.language
this.language },
) this.options
const modifiedModel = monaco.editor.createModel( )
this.value,
this.language if (this.diffEditor) {
) this.editor = monaco.editor.createDiffEditor(this.$el, options)
this.editor.setModel({ const originalModel = monaco.editor.createModel(
original: originalModel, this.original,
modified: modifiedModel this.language
}) )
} else { const modifiedModel = monaco.editor.createModel(
this.editor = monaco.editor.create(this.$el, options) this.value,
} this.language
)
// @event `change` this.editor.setModel({
const editor = this.getModifiedEditor() original: originalModel,
editor.onDidChangeModelContent(event => { modified: modifiedModel
const value = editor.getValue() })
if (this.value !== value) { } else {
this.$emit('change', value, event) this.editor = monaco.editor.create(this.$el, options)
} }
})
// @event `change`
this.$emit('editorDidMount', this.editor) const editor = this.getModifiedEditor()
}, editor.onDidChangeModelContent(event => {
const value = editor.getValue()
/** @deprecated */ if (this.value !== value) {
getMonaco() { this.$emit('change', value, event)
return this.editor }
}, })
getEditor() { this.$emit('editorDidMount', this.editor)
return this.editor },
},
/** @deprecated */
getModifiedEditor() { getMonaco() {
return this.diffEditor ? this.editor.getModifiedEditor() : this.editor return this.editor
}, },
focus() { getEditor() {
this.editor.focus() return this.editor
} },
},
getModifiedEditor() {
render(h) { return this.diffEditor ? this.editor.getModifiedEditor() : this.editor
return h('div') },
}
focus() {
this.editor.focus()
}
},
render(h) {
return h('div')
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment