init

src/components/codeEdit/JavaCodeEdit.vue

@@ -0,0 +1,69 @@
+<template>
+  <codemirror
+      v-model="javaCode"
+      :placeholder="editorPlaceholder"
+      :style="{ height: editorHeight+'px' }"
+      :autofocus="true"
+      :indent-with-tab="true"
+      :tabSize="tabSize"
+      :extensions="extensions"
+      :scrollbarStyle="null"
+  />
+</template>
+
+<script setup>
+import {Codemirror} from "vue-codemirror";
+import {java, javaLanguage} from "@codemirror/lang-java";
+
+const emit = defineEmits()
+const props = defineProps({
+  value: {
+    type: String,
+    default: "",
+  },
+  editorPlaceholder: {
+    type: String,
+    default: "请输入代码",
+  },
+  editorHeight: {
+    type: String,
+    default: "300",
+  },
+  tabSize: {
+    type: Number,
+    default: 2,
+  }
+})
+const _value = computed({
+  get() {
+    return props.value || ""
+  },
+  set(value) {
+    emit('update:value', value)
+  }
+})
+const javaCode = ref();
+const customJavaCodeTips = (context) => {
+  let word = context.matchBefore(/\w*/)
+  if (word.from == word.to && !context.explicit) return null;
+  return {
+    from: word.from?word.from:context.pos,
+    options: [
+      {label: "function", type: "keyword",apply:"function name(params) {\n\t\n}",detail: "definition"},
+      // {label: "hello", type: "variable", info: "(World)"},
+      {label: "fori", type: "keyword",apply:"for (let i = 0; i < list.length; i++) {\n\n}", detail: "loop"},
+      {label: "for", type: "keyword",apply:"for (let name of list) {\n\n}", detail: "of loop"},
+      {label: "psf", type: "keyword",apply:"public static final ", detail: "public static final"},
+      {label: "psv", type: "keyword",apply:"public static void name(){\n\n}", detail: "public static void"},
+      {label: "psfi", type: "keyword",apply:"public static final int ", detail: "public static final int"},
+      {label: "psfs", type: "keyword",apply:"public static final String ", detail: "public static final String"},
+      {label: "psvm", type: "keyword", apply: "public static void main(String[] args){\n\t\n}", detail: "main() 方法声明"}
+    ]
+  }
+}
+
+const javaSnippets = javaLanguage.data.of({
+  autocomplete: customJavaCodeTips,
+})
+const extensions = ref([java(), javaSnippets]);
+</script>

src/components/codeEdit/JsCodeEdit.vue

@@ -0,0 +1,48 @@
+<template>
+    <codemirror
+        v-model="jsCode"
+        :placeholder="editorPlaceholder"
+        :style="{ height: editorHeight+'px' }"
+        :autofocus="true"
+        :indent-with-tab="true"
+        :tabSize="tabSize"
+        :extensions="extensions"
+        :scrollbarStyle="null"
+    />
+</template>
+
+<script setup>
+import {Codemirror} from "vue-codemirror";
+import {javascript} from "@codemirror/lang-javascript";
+import {defineEmits, ref, defineProps, computed} from "vue";
+
+const emit = defineEmits()
+const props = defineProps({
+  value: {
+    type: String,
+    default: "",
+  },
+  editorPlaceholder: {
+    type: String,
+    default: "请输入代码",
+  },
+  editorHeight: {
+    type: String,
+    default: "300",
+  },
+  tabSize: {
+    type: Number,
+    default: 2,
+  }
+})
+const _value = computed({
+  get() {
+    return props.value || ""
+  },
+  set(value) {
+    emit('update:value', value)
+  }
+})
+const jsCode = ref();
+const extensions = ref([javascript()]);
+</script>

src/components/codeEdit/SqlCodeEdit.vue

@@ -0,0 +1,83 @@
+<template>
+    <codemirror
+        v-model="sqlCode"
+        :placeholder="editorPlaceholder"
+        :style="{ height: editorHeight+'px' }"
+        :autofocus="true"
+        :indent-with-tab="true"
+        :tabSize="tabSize"
+        :extensions="extensions"
+        :scrollbarStyle="null"
+        @change="emit('change',$event)"
+    />
+<!--    <div class="sql-format">-->
+<!--      <span @click="formatSql">格式化SQL</span>-->
+<!--      <span @click="clearVal">一键清空</span>-->
+<!--    </div>-->
+</template>
+
+<script setup>
+import {Codemirror} from "vue-codemirror";
+import {sql} from '@codemirror/lang-sql';
+import {defineEmits, ref, defineProps, computed} from "vue";
+import * as sqlFormatter from "sql-formatter";
+
+const emit = defineEmits()
+const props = defineProps({
+  value: {
+    type: String,
+    default: "",
+  },
+  editorPlaceholder: {
+    type: String,
+    default: "请输入代码",
+  },
+  editorHeight: {
+    type: String,
+    default: "300",
+  },
+  tabSize: {
+    type: Number,
+    default: 2,
+  }
+})
+const _value = computed({
+  get() {
+    return props.value || ""
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+
+const sqlCode = ref(_value);
+const extensions = ref([sql()]);
+//代码格式化
+const formatSql = () => {
+  sqlCode.value=sqlFormatter.format(sqlCode.value)
+}
+// 清除值
+const clearVal = () => {
+  sqlCode.value=''
+}
+</script>
+<style scoped lang="scss">
+.sql-format {
+  background-color: #f7f7f7;
+  text-align: right;
+  color: #2a99ff;
+  padding: 10px;
+
+  span:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  > span:first-child {
+    margin-right: 10px;
+  }
+}
+::v-deep .cm-line{
+  font-size: 16px;
+}
+</style>