vue codemirror vue-codemirror

yarn add vue-codemirror

yarn 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';

// styleSelectedText
import 'codemirror/addon/selection/mark-selection.js';
// hint
import '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';
// highlightSelectionMatches
import 'codemirror/addon/scroll/annotatescrollbar.js';
import 'codemirror/addon/search/matchesonscrollbar.js';
import 'codemirror/addon/search/match-highlighter.js';
// keyMap
import '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';
// foldGutter
import '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/markdown-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>

在quasar中 配合q-dialog使用的时候如果出现 行编号挡住了代码，那么请给dialog添加  transition-show 属性  这个 transition-show 属性很不起眼，但是非常重要。

<template>
  <q-dialog v-model="codeDrawer" persistent :maximized="true" transition-show>
    <q-form class="dialog_tool column">
      <h5 class="view_title justify-between q-px-md">
        页面预览
        <q-btn dense outline round icon="clear" size="sm" v-close-popup />
      </h5>
      <div class="col row">
        <div class="col column" v-if="showCode">
          <q-separator />
          <q-scroll-area class="col">
            <code-editor :previewData="previewData" />
          </q-scroll-area>
        </div>
        <div class="col column bg-white">
          <div class="q-mb-sm bg-light-blue-1">
            <q-toggle label="显示代码" v-model="showCode" />
          </div>
          <code-runner :previewData="previewData" />
        </div>
      </div>
    </q-form>
  </q-dialog>
</template>
<script>
import codeRunner from './coderunner';
import codeEditor from './codeeditor';

export default {
  components: { codeRunner, codeEditor },
  data() {
    return {
      activeTab: 'template',
      showCode: true,
      codeDrawer: false,
      showPreview: false,
      previewData: '',
    };
  },
  computed: {
  },
  watch: {},
  created() {
  },
  mounted() {
    window.addEventListener('keydown', this.preventDefaultSave);
  },
  methods: {
    preventDefaultSave(e) {
      if (e.key === 's' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
      }
    },
    show(previewData) {
      this.previewData = previewData;
      this.codeDrawer = true;
    },
    close() {
      this.codeDrawer = false;
    },
  },
};
</script>