添加 code mirror

wujingjing

2024-08-29 4739692ba84e946660d83c386e750d70e1e37f82

 src/views/project/yw/lowCode/sqlAmis/SqlAmis.vue

@@ -1,8 +1,67 @@
<template>
   <div>
		
   <div class="h-full flex flex-col">
      <div class="grid grid-cols-2 gap-2 h-2/3 flex-0">
         <div class="h-full overflow-auto">
            <!-- <codemirror
               v-model="dockCode"
               :style="{ height: '100%' }"
               :autofocus="true"
               :indent-with-tab="true"
               :tab-size="2"
               :extensions="dockEditorExtensions"
               @change="log('change', $event)"
               @focus="log('focus', $event)"
               @blur="log('blur', $event)"
            /> -->
				
         </div>
         <div class="h-full overflow-auto">
            <codemirror
               class="h-full overflow-auto"
               v-model="sqlCode"
               :style="{ height: '100%' }"
               :autofocus="true"
               :indent-with-tab="true"
               :tab-size="2"
               :extensions="sqlEditorExtensions"
               @change="log('change', $event)"
               @focus="log('focus', $event)"
               @blur="log('blur', $event)"
            />
         </div>
      </div>
      <div class="flex-auto overflow-auto mt-3">
         <codemirror
            disabled
            class="h-full overflow-auto"
            v-model="jsonCode"
            :style="{ height: '100%' }"
            :autofocus="true"
            :indent-with-tab="true"
            :tab-size="2"
            :extensions="jsonEditorExtensions"
            @change="log('change', $event)"
            @focus="log('focus', $event)"
            @blur="log('blur', $event)"
         />
      </div>
   </div>
</template>

<script setup lang="ts"></script>
<style scoped lang="scss"></style>
<script setup lang="ts">
import { defineComponent, ref, shallowRef } from 'vue';
import { Codemirror } from 'vue-codemirror';
import { json } from '@codemirror/lang-json';
import { vscodeDark, vscodeLight, vscodeLightInit } from '@uiw/codemirror-theme-vscode';
import * as codeExample from './testData';
import { sql } from '@codemirror/lang-sql';
import { xml } from '@codemirror/lang-xml';
const log = console.log;
const jsonCode = ref(codeExample.jsonCode);
const dockCode = ref(codeExample.dockCode);
const sqlCode = ref(codeExample.sqlCode);

const jsonEditorExtensions = [json(), vscodeDark];
const sqlEditorExtensions = [sql(), vscodeDark];
const dockEditorExtensions = [xml(), vscodeDark];
</script>