# 安装
npm install vue-codemirror --save
# 安装支持组件
npm i @codemirror/lang-javascript
# 安装主题
npm i @codemirror/theme-one-dark
# 组件配置
<template>
<codemirror
v-model="state.code"
placeholder="Code gose here..."
:style="{ height: '100%' }"
:autofocus="true"
:indent-with-tab="true"
:tabSize="4"
:extensions="extensions"
@ready="log('ready', $event)"
@change="log('change', $event)"
@focus="log('focus', $event)"
@blur="log('blur', $event)"
/>
</template>
<script type="ts" setup>
import { Codemirror } from "vue-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";
import { ref ,defineComponent,reactive,defineProps,onMounted} from "vue";
const log=console.log
const props=defineProps({
modelValue: String,
code:String
})
onMounted(() => {
state.code=ref(props.code)
});
const extensions = [javascript(), oneDark];
const state=reactive({
code:''
})
</script>
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
29
30
31
32
33
34
35
36
37
38
39
40
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
29
30
31
32
33
34
35
36
37
38
39
40
# 使用
<ug-codemirror :code="123"></ug-codemirror>
1
2
2