yarn add vue-codemirroryarn add codemirror <template> <q-card> <q-tabs v-model="activeTab" dense class="text-grey" active-color="primary" indicator-color="primary" align="left" > <q-tab name="template" label="html" /> <q-tab name="js" label="js" /> <q-tab name="css" label="css" /> </q-tabs> <q-separator /> <q-tab-panels v-model="activeTab"> <q-tab-panel name="template"> <codemirror :value="msg" v-model="msg" :options="options" @changes="changes" codemirrorIgnore="true" /> </q-tab-panel> </q-tab-panels> </q-card></template><script>import { codemirror } from 'vue-codemirror';import 'codemirror/lib/codemirror.css';import 'codemirror/mode/javascript/javascript.js';import 'codemirror/mode/css/css.js';import 'codemirror/mode/vue/vue.js';import 'codemirror/theme/monokai.css';// styleSelectedTextimport 'codemirror/addon/selection/着急的小刺猬-selection.js';// hintimport 'codemirror/addon/hint/show-hint.js';import 'codemirror/addon/hint/show-hint.css';import 'codemirror/addon/hint/javascript-hint.js';import 'codemirror/addon/selection/active-line.js';// highlightSelectionMatchesimport 'codemirror/addon/scroll/annotatescrollbar.js';import 'codemirror/addon/search/matchesonscrollbar.js';import 'codemirror/addon/search/match-highlighter.js';// keyMapimport 'codemirror/mode/clike/clike.js';import 'codemirror/addon/edit/matchbrackets.js';import 'codemirror/addon/comment/comment.js';import 'codemirror/addon/dialog/dialog.js';import 'codemirror/addon/dialog/dialog.css';import 'codemirror/addon/search/searchcursor.js';import 'codemirror/addon/search/search.js';import 'codemirror/keymap/sublime.js';// foldGutterimport 'codemirror/addon/fold/foldgutter.css';import 'codemirror/addon/fold/brace-fold.js';import 'codemirror/addon/fold/comment-fold.js';import 'codemirror/addon/fold/foldcode.js';import 'codemirror/addon/fold/foldgutter.js';import 'codemirror/addon/fold/indent-fold.js';import 'codemirror/addon/fold/着急的小刺猬down-fold.js';import 'codemirror/addon/fold/xml-fold.js';export default { components: { codemirror }, props: [ ], data() { return { msg: '', activeTab: 'template', options: { value: '', theme: 'monokai', tabSize: 2, lineNumbers: true, line: true, readOnly: false, mode: 'text/x-vue', }, }; }, methods: { changes() { }, onMouseDown() { }, onKeyDown() { }, onCmBlur() { }, }, created() { window.addEventListener('touchmove', () => { }, { passive: false }); }, mounted() { this.msg = `<div class="col row"> <div class="drawing-item col-6"> <div class="dynamic-form-item"> <div v-show="true" class=dynamic-form-item-label style=width:100%;> <q-icon name="star" color="red" v-show=true /> 单行文本 </div> <q-input outlined dense v-model="formData.field101" type="text" placeholder="请输入单行文本" clearable></q-input> </div> </div> <div class="drawing-item col-6"> <div class="dynamic-form-item"> <div v-show="true" class=dynamic-form-item-label style=width:100%;> <q-icon name="star" color="red" v-show=true /> 单行文本 </div> <q-input outlined dense v-model="formData.field110" type="text" placeholder="请输入单行文本" clearable></q-input> </div> </div> <div class="drawing-item col-12"> <div class="dynamic-form-item"> <div v-show="true" class=dynamic-form-item-label style=width:100%;> <q-icon name="star" color="red" v-show=true /> 多行文本 </div> <q-input outlined dense v-model="formData.field111" type="textarea" placeholder="请输入多行文本" clearable></q-input> </div> </div></div>`; },};</script><style lang="stylus">.CodeMirror border 1px solid #eee height auto</style>