我正在使用带有typescript的vuejs来创建一个基于Monaco Editor json validation的组件,到目前为止它工作正常并且正确呈现但是我有一个小问题,我无法提供自定义模式验证摩纳哥编辑,截至目前这是我的实现,但当我传递模式作为摩纳哥编辑器child.tsx文件的道具时,它无法工作,任何帮助都将受到高度赞赏。
Parent.tsx文件,我正在使用Monaco编辑器并定义了道具
data() {
const id = 'foo.json';
const validCardSchema = [{
uri: 'http://myserver/foo-schema.json',
fileMatch: [id],
schema: {
type: 'object',
properties: {
p1: {
enum: ['v1', 'v2']
},
p2: {
$ref: 'http://myserver/bar-schema.json'
}
}
}
}, {
uri: 'http://myserver/bar-schema.json',
fileMatch: [id],
schema: {
type: 'object',
properties: {
q1: {
enum: ['x1', 'x2']
}
}
}
}];
return {
jsonEditorText: JSON.stringify(editorCode),
validCardSchema
};
}
<TMonacoEditor
width="400"
height="400"
language="json"
style="border: none;"
code={this.MonacoEditorText}
onCodeChange={newVal => this.updateMonacoEditorText(newVal)} />
文件
child.tsx文件,其中定义了monaco编辑器功能
createMonaco() {
debugger;
this.editor = monaco.editor.create(this.$el, this.editorOptions);
this.editor.onDidChangeModelContent(event =>
this.$emit('codeChange', this.editor.getValue())
);
console.log(this.cardSchema);
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
validate: true,
schemas: this.cardSchema
});
this.monaco = monaco;
}
},
render(h): VNode {
return <div style={this.style} />;
}
因此,即使我传递了在props模式中未定义的错误的json属性,上述条件也不会显示任何验证错误。
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({ 验证:是的, schemas:this.cardSchema });