codemirror6 展示vue代码

参考：

vue-codemirror | Homepage

vue3中使用codemirror6增加代码提示功能_vue 编辑器提示-CSDN博客

vue-codemirror6+vue3的基础使用（行高、json字符串、黑暗主题、自定义主题）-CSDN博客

一：安装依赖 

npm i codemirror
npm i vue-codemirror
npm i @codemirror/theme-one-dark
npm i @codemirror/lang-vue

二：代码使用

<template>
  <win ref="winRef" title="代码" noBtns width="90%" top="0">
    <Codemirror
      v-model="code"
      placeholder="Code goes here..."
      :style="{ height: '80vh' }"
      :autofocus="true"
      :indent-with-tab="true"
      :tab-size="2"
      :extensions="extensions"
      @ready="handleReady"
    />
  </win>
</template>

<script lang="ts" setup>
import { Codemirror } from "vue-codemirror";
import { vue } from "@codemirror/lang-vue";
import { oneDark } from "@codemirror/theme-one-dark";
import { tpl } from "./tpls/grid";

import {
  ref,
  reactive,
  withDefaults,
  defineProps,
  defineEmits,
  defineExpose,
  toRefs,
  computed,
  watch,
  nextTick,
  toRaw,
} from "vue";
const code = ref(tpl.trim());
const extensions = [vue(), oneDark];

const winRef = ref();

function templateReplace(
  template: string,
  values: { [key: string]: string }
): string {
  return template.replace(/#(\w+)#/g, (match, key) => {
    return values[key];
  });
}
const onSubmit = async () => {
  props.afterSubmit(cloneDeep(toRaw(columns.value)));
};
function handleReady() {
  console.log("ready");
}

defineExpose({
  show: async (data?: any) => {
    let str = tpl.trim();
    const v = {
      api: data.gridApi,
      defaultFilter: data.defaultFilter || undefined,
      defaultSort: data.defaultSort || undefined,
      columns: JSON.stringify(toRaw(data.gridColumns), null, 2),
      searchFields: JSON.stringify(toRaw(data.searchColumns), null, 2),
      tbarBtns: JSON.stringify(toRaw(data.btnsColumns), null, 2),
    };
    code.value = templateReplace(str, v);
    winRef.value.show();
  },
});
</script>
<style lang="scss" scoped>
.tb {
  height: 300px;
}
</style>