93 lines
2.2 KiB
Vue
93 lines
2.2 KiB
Vue
<template>
|
||
<div style="height: 800px">
|
||
<codemirror ref="codeMirror" v-model="code" :options="cmOptions" style="height: 800px"/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { codemirror } from 'vue-codemirror'
|
||
import 'codemirror/mode/clike/clike';
|
||
// cm-setting.js
|
||
// 组件样式
|
||
import 'codemirror/lib/codemirror.css';
|
||
// 主题
|
||
import 'codemirror/theme/eclipse.css';
|
||
// import 'codemirror/theme/monokai.css';
|
||
|
||
// html代码高亮
|
||
import 'codemirror/mode/htmlmixed/htmlmixed.js';
|
||
|
||
// 语言模式
|
||
import 'codemirror/mode/javascript/javascript.js';
|
||
import 'codemirror/mode/css/css.js';
|
||
import 'codemirror/mode/xml/xml.js';
|
||
// 代码展开折叠
|
||
import 'codemirror/addon/fold/foldcode.js';
|
||
import 'codemirror/addon/fold/foldgutter.js';
|
||
import 'codemirror/addon/fold/foldgutter.css';
|
||
import 'codemirror/addon/fold/brace-fold.js';
|
||
export default {
|
||
components: {
|
||
codemirror,
|
||
},
|
||
props: {
|
||
value: {
|
||
default: "",
|
||
type: String
|
||
},
|
||
readOnly: {
|
||
default: false,
|
||
type: Boolean
|
||
}
|
||
},
|
||
name: "Encoding",
|
||
data() {
|
||
return {
|
||
codemirror: null,
|
||
code: this.value,
|
||
cmOptions: {
|
||
autoRefresh: true, // 重点是这句，为true
|
||
value: '', // 初始内容
|
||
mode: 'text/x-java', //实现Java代码高亮
|
||
tabSize: 4, // tab的空格宽度
|
||
styleActiveLine: true, // 设置光标所在行高亮true/false
|
||
lineNumbers: true, //显示行号
|
||
theme: 'eclipse', //设置主题cobalt/monokai
|
||
// json: true,
|
||
readOnly: this.readOnly, // 设置为只读true/false;也可设置为"nocursor"失去焦点
|
||
lineWrapping: false,
|
||
foldGutter: true,
|
||
gutters: [
|
||
'CodeMirror-lint-markers', //代码错误检测
|
||
'CodeMirror-linenumbers',
|
||
'CodeMirror-foldgutter', //展开折叠
|
||
],
|
||
},
|
||
}
|
||
},
|
||
watch:{
|
||
code:{
|
||
handler(val){
|
||
this.$emit('input', val);
|
||
},
|
||
immediate:true
|
||
}
|
||
},
|
||
created() {
|
||
},
|
||
methods: {}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
.CodeMirror {
|
||
font-family: 'JetBrainsMono-Medium', monospace;
|
||
height: 800px;
|
||
}
|
||
|
||
.CodeMirror-lines {
|
||
line-height: 1.5; /* 这里的1.5是示例，表示行间距是字体大小的1.5倍 */
|
||
}
|
||
</style>
|