关于MonacoEditor报错的问题
来源:1-2 【讨论题】是什么驱动你来学习Vue3的

hawke7277
2022-06-11
老师你好,我的MonacoEditor.tsx文件显示存在问题,具体问题如下props.onChange
显示不能调动可能是未定义的对象
下面的代码为MonacoEditor.tsx
文件
/* eslint no-use-before-define: 0 */
import { defineComponent, ref, onMounted, watch, onBeforeUnmount, shallowReadonly, shallowRef } from 'vue'
import * as Monaco from 'monaco-editor'
import type { PropType, Ref } from 'vue'
import { createUseStyles } from 'vue-jss'
const useStyles = createUseStyles({
container: {
border: '1px solid #eee',
display: 'flex',
flexDirection: 'column',
borderRadius: 5
},
title: {
backgroundColor: '#eee',
padding: '10px 0',
paddingLeft: 20,
},
code: {
flexGrow: 1
}
})
export default defineComponent({
props: {
code: {
type: String as PropType<string>,
required: true
},
onChange: {
type: Function as PropType<(value: string, event: Monaco.editor.IModelContentChangedEvent) => void>,
required: true
},
title: {
type: String as PropType<string>,
required: true
}
},
setup(props) {
// must be shallowRef, if not, editor.getValue() won't work
const editorRef = shallowRef()
const containerRef = ref()
let _subscription: Monaco.IDisposable | undefined
let __prevent_trigger_change_event = false
onMounted(() => {
const editor = editorRef.value = Monaco.editor.create(containerRef.value, {
value: props.code,
language: 'json',
formatOnPaste: true,
tabSize: 2,
minimap: {
enabled: false,
},
})
_subscription = editor.onDidChangeModelContent((event) => {
console.log('--------->', __prevent_trigger_change_event)
if (!__prevent_trigger_change_event) {
props.onChange(editor.getValue(), event);
}
});
})
onBeforeUnmount(() => {
if (_subscription)
_subscription.dispose()
})
watch(() => props.code, (v) => {
const editor = editorRef.value
const model = editor.getModel()
if (v !== model.getValue()) {
editor.pushUndoStop();
__prevent_trigger_change_event = true
// pushEditOperations says it expects a cursorComputer, but doesn't seem to need one.
model.pushEditOperations(
[],
[
{
range: model.getFullModelRange(),
text: v,
},
]
);
editor.pushUndoStop();
__prevent_trigger_change_event = false
}
// if (v !== editorRef.value.getValue()) {
// editorRef.value.setValue(v)
// }
})
const classesRef = useStyles()
return () => {
const classes = classesRef.value
return (
<div class={classes.container}>
<div class={classes.title}><span>{props.title}</span></div>
<div class={classes.code} ref={containerRef}></div>
</div>
)
}
}
})
以下为我的package.json
文件
{
"name": "vue3-json-schema-form",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"ajv": "^8.11.0",
"ajv-errors": "^3.0.0",
"ajv-i18n": "^4.2.0",
"core-js": "^3.22.8",
"jss": "^10.9.0",
"jss-preset-default": "^10.9.0",
"vue": "^3.2.13",
"vue-jss": "^0.0.4"
},
"devDependencies": {
"@types/jest": "^27.0.1",
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"@vue/babel-plugin-jsx": "^1.1.1",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-typescript": "~5.0.0",
"@vue/cli-plugin-unit-jest": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-typescript": "^9.1.0",
"@vue/test-utils": "^2.0.0-0",
"@vue/vue3-jest": "^27.0.0-alpha.1",
"babel-jest": "^27.0.6",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"jest": "^27.0.5",
"lint-staged": "^11.1.2",
"monaco-editor": "^0.20.0",
"prettier": "^2.4.1",
"ts-jest": "^27.0.4",
"typescript": "~4.5.5"
},
"gitHooks": {
"pre-commit": "lint-staged"
}
}
也有尝试过降级版本之类的但是都没有成功,想问问老师这个应该怎么办
写回答
1回答
-
Jokcy
2022-08-29
这是props.onChange啊,这是你自己定义的吧?
00
相似问题