From 4739692ba84e946660d83c386e750d70e1e37f82 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期四, 29 八月 2024 11:38:43 +0800
Subject: [PATCH] 添加 code mirror
---
src/views/project/yw/lowCode/sqlAmis/SqlAmis.vue | 67 +++++++++++++++++++++++++++++++--
1 files changed, 63 insertions(+), 4 deletions(-)
diff --git a/src/views/project/yw/lowCode/sqlAmis/SqlAmis.vue b/src/views/project/yw/lowCode/sqlAmis/SqlAmis.vue
index 21c1c93..f2f6b51 100644
--- a/src/views/project/yw/lowCode/sqlAmis/SqlAmis.vue
+++ b/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>
--
Gitblit v1.9.3