随便输入点什么就正常了。

这是这个代码组件本身的问题，尚无法解决。可能会考虑更换代码组件。

随便输入点什么就正常了。

这是这个代码组件本身的问题，尚无法解决。可能会考虑更换代码组件。

vue-codemirror-lite这个组件我感觉挺好 你可以替换一下试试

<script> import { codemirror } from 'vue-codemirror-lite' import 'codemirror/mode/javascript/javascript.js' import 'codemirror/mode/vue/vue.js' import 'codemirror/mode/sql/sql.js' import 'codemirror/addon/hint/show-hint.js' import 'codemirror/addon/hint/show-hint.css' import 'codemirror/addon/hint/javascript-hint.js' import 'codemirror/addon/display/fullscreen.js' import 'codemirror/theme/panda-syntax.css' export default { name: 'CodeMirrorLite', components: { codemirror }, props: { // 外部传入的内容，用于实现双向绑定 value: { type: String, default: '' }, // 外部传入的语法类型 mode: { type: String, default: null }, languageChange: { type: Boolean, default: false, required: false }, placeholder: { type: String, default: null }, // 显示行号 lineNumbers: { type: Boolean, default: true }, // 是否显示全屏按钮 fullScreen: { type: Boolean, default: false }, // 全屏以后的z-index zIndex: { type: [Number, String], default: 999 }, style_: { // codeMirror样式 如果需要设置样式 height是必填 type: String, default: 'height:150px;' } }, data() { return { // 默认配置 options: { mode: 'javascript', // 缩进格式 tabSize: 2, // 主题，对应主题库 JS 需要提前引入 theme: 'panda-syntax', line: true, hintOptions: { tables: { users: ['name', 'score', 'birthDate'], countries: ['name', 'population', 'size'] } } }, iconType: 'fullscreen', // code 编辑器 是否全屏 fullCoder: false } }, watch: { fullCoder: { handler(value) { if (value) { this.iconType = 'fullscreen-exit' } else { this.iconType = 'fullscreen' } } } }, computed: { getOptions() { if (this.mode) { this.options.mode = this.mode } this.options.lineNumbers = this.lineNumbers this.options.fullScreen = this.fullScreen return this.options }, editor() { return this.$refs.myEditor.editor }, getValue() { return this.value ? this.value : '' }, fullScreenParentProps() { const props = { class: ['full-screen-parent', this.fullCoder ? 'full-screen' : ''], style: {} } if (this.fullCoder) { props.style['z-index'] = this.zIndex } return props } }, mounted() { }, methods: { editroChange() { this.$emit('input', this.$refs.myEditor.editor.getValue()) } } } </script> <style lang="less"> .CodeMirror { min-height: 120px; height: 100%; } .CodeMirror-fullscreen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: auto; z-index: 9; } /* 全屏样式 */ .full-screen-parent { position: relative; .full-screen-icon { opacity: 0; color: black; width: 20px; height: 20px; line-height: 24px; background-color: white; position: absolute; top: 2px; right: 2px; z-index: 9; cursor: pointer; transition: opacity 0.3s; } &:hover { .full-screen-icon { opacity: 1; &:hover { background-color: rgba(255, 255, 255, 0.88); } } } &.full-screen { position: fixed; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); padding: 10px; background-color: #f5f5f5; .full-screen-icon { top: 12px; right: 12px; } .full-screen-child { height: 100%; max-height: 100%; min-height: 100%; } .vue-codemirror-wrap,.cm-s-panda-syntax{ height: 100% !important; } } .full-screen-child { min-height: 120px; max-height: 320px; overflow:hidden; } } </style>