在最近的一个项目中想要做一个数据库字段关联关系视图展示,由于项目中使用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>