适用场景
一个项目使用多个editor
优化
1.单例模式：定义editor类，对实例进行缓存，提高复用率
2.通过append实例dom，尽量减少editor的重复创建
代码
import Editor from './MonacoEditor'
import Vue from 'vue'
let editorCache = {}
class Editor_ {
constructor () {
this.instance = new Vue({
name: 'EditorInstance',
data () {
return {
value: '',
language: '',
readOnly: false,
minimap: false,
suggestions: []
}
},
watch: {
value (value) {
this.$emit('value-change', value)
}
},
render (h) {
return h(Editor, {
props: {
value: this.value,
language: this.language,
readOnly: this.readOnly,
minimap: this.minimap,
suggestions: this.suggestions
},
on: {
'update': (value) => {
this.value = value
}
}
})
}
})
this.instance.$mount()
}
/**
* 初始化渲染editor
*/
init ($container, props) {
Object.assign(this.instance.$data, props)
$container.appendChild(this.instance.$el)
}
/**
* 设置data
*/
setData (key, value) {
this.instance[key] = value
}
/**
* 获取data
*/
getData (key) {
return this.instance[key]
}
/**
* 删除实例
*/
destroy () {
this.instance && this.instance.$destroy()
}
}
/**
* 注册
*/
Editor.register = function (name) {
if (editorCache[name] === undefined) {
editorCache[name] = new Editor_()
}
return editorCache[name]
}
export default Editor
