vue-codeirror编辑器vue3中的使用

vue-codeirror编辑器vue3中的使用

<script lang="ts" setup>
import { ref,reactive } from 'vue';
import { Codemirror } from "vue-codemirror";
import { oneDark } from "@codemirror/theme-one-dark";
import { json } from '@codemirror/lang-json';
let props = defineProps(['jsonExample'])
let $emit = defineEmits(['importJsonData'])
const extensions = [json(), oneDark];
const state=reactive({
  selectValue:1,
  codeStyle:{height:'600px',marginTop:'10px'},
})m
</script>
<template>
  <div>
      <codemirror
        v-model="props.jsonExample"
        :extensions="extensions"
        :style="state.codeStyle"
      />
  </div>
</template>
// 如果需要在组件内实时格式化JSON，可以添加一个watcher
    // 注意：频繁格式化可能导致性能问题，仅在必要时使用
    // watch(rawJson, () => {
    //   jsonExample.value = JSON.stringify(rawJson.value, null, 2);
    // });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28