在最近的一个项目中想要做一个数据库字段关联关系视图展示,由于项目中使用vue3,所有需要使用codemirror 6.接下来看一下具体的实现过程

1、安装

npm install vue-codemirror --save

2、安装对应文件

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

3、配置及使用

<template>
  <div class="box">
    <Codemirror
      class="code"
      v-model="code"
      :style="{ height: '100%' }"
      :extensions="extensions"//扩展
      :options="{ mode: 'application/json' }"//编辑json格式
      :autofocus="true"//挂在后聚焦
      :disabled="false"
      @ready="handleClick('ready', $event)"
      @change="handleClick('change', $event)"
      @focus="handleClick('focus', $event)"
      @blur="handleClick('blur', $event)"
    />
  </div>
</template>
<script setup>
import { Codemirror } from 'vue-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import initJson from '@/staticData/initJson.js';
import { oneDark } from '@codemirror/theme-one-dark';
const code = ref(JSON.stringify(initJson, null, '\t'));
const extensions = [javascript(), oneDark];
const handleClick = (type, val) => {
  console.log(type, val);
};
</script>
<style scoped lang="scss">
.box {
  width: calc(100% - 180px);
  height: 300px;
  background: #fff;
}
.code {
  width: 300px;
  height: 300px;
}
</style>