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><codemirrorv-model="props.jsonExample":extensions="extensions":style="state.codeStyle"/></div>
</template>
// 如果需要在组件内实时格式化JSON，可以添加一个watcher// 注意：频繁格式化可能导致性能问题，仅在必要时使用// watch(rawJson, () => {//   jsonExample.value = JSON.stringify(rawJson.value, null, 2);// });