init

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>