97 lines
3.2 KiB
Vue
97 lines
3.2 KiB
Vue
<template>
|
||
<codemirror ref="codeEdit"
|
||
:options="cmOptions"
|
||
v-model="_value"
|
||
@input="inputChange"
|
||
class="code"/>
|
||
</template>
|
||
|
||
<script>
|
||
import { codemirror } from 'vue-codemirror'
|
||
// 引入主题 可以从 codemirror/theme/ 下引入多个
|
||
import "vue-codemirror/node_modules/codemirror/lib/codemirror.css";
|
||
import 'vue-codemirror/node_modules/codemirror/theme/idea.css'
|
||
import 'vue-codemirror/node_modules/codemirror/theme/duotone-dark.css'
|
||
// 引入语言模式 可以从 codemirror/mode/ 下引入多个
|
||
import "vue-codemirror/node_modules/codemirror/mode/javascript/javascript"; // 代码高亮必须引入
|
||
import "vue-codemirror/node_modules/codemirror/mode/sql/sql"; // 代码高亮必须引入
|
||
//代码补全
|
||
import 'vue-codemirror/node_modules/codemirror/addon/hint/javascript-hint.js';
|
||
// import 'vue-codemirror/node_modules/codemirror/addon/hint/show-hint.css';
|
||
import 'vue-codemirror/node_modules/codemirror/addon/hint/show-hint.js';
|
||
|
||
// 代码段折叠功能
|
||
import 'vue-codemirror/node_modules/codemirror/addon/fold/foldcode'
|
||
import 'vue-codemirror/node_modules/codemirror/addon/fold/foldgutter'
|
||
import 'vue-codemirror/node_modules/codemirror/addon/fold/foldgutter.css'
|
||
|
||
import 'vue-codemirror/node_modules/codemirror/addon/fold/brace-fold'
|
||
import 'vue-codemirror/node_modules/codemirror/addon/fold/comment-fold'
|
||
import 'vue-codemirror/node_modules/codemirror/addon/fold/xml-fold.js';
|
||
import 'vue-codemirror/node_modules/codemirror/addon/fold/indent-fold.js';
|
||
import 'vue-codemirror/node_modules/codemirror/addon/fold/markdown-fold.js';
|
||
import 'vue-codemirror/node_modules/codemirror/addon/fold/comment-fold.js';
|
||
|
||
export default {
|
||
name: "CodeEdit",
|
||
components:{codemirror},
|
||
props:{
|
||
value:{
|
||
type:String,
|
||
default:"",
|
||
}
|
||
},
|
||
data(){
|
||
return {
|
||
code:"",
|
||
cmOptions:{
|
||
tabSize: 4, // tab
|
||
indentUnit: 2,
|
||
mode: 'javascript', // 模式
|
||
theme: 'idea', // 主题
|
||
lineNumbers: true, // 是否显示行号
|
||
lineWrapping: true,//是否自动换行
|
||
styleActiveLine: true, // 高亮选中行
|
||
highlightSelectionMatches: { showToken: /w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例
|
||
line: true,
|
||
matchBrackets: true,
|
||
// 自动括号匹配功能
|
||
showCursorWhenSelecting: false,
|
||
hintOptions: {
|
||
// 当匹配只有一项的时候是否自动补全
|
||
completeSingle: false
|
||
},
|
||
foldGutter: true, // 支持折叠
|
||
extraKeys: { 'Ctrl': 'autocomplete' }, // 可以用于为编辑器指定额外的键绑定，以及keyMap定义的键绑定
|
||
gutters: ['CodeMirror-linenumbers', "lock", "warn"],
|
||
},
|
||
}
|
||
},
|
||
computed:{
|
||
_value :{
|
||
get(){
|
||
return this.value;
|
||
},
|
||
set(val){
|
||
this.value = val;
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$refs.codeEdit.codemirror.on("inputRead",(cm)=>{
|
||
cm.showHint();
|
||
})
|
||
this.$refs.codeEdit.codemirror.on("change", (cm) => {
|
||
this._value = cm.getValue()
|
||
this.$emit("input",this._value)
|
||
})
|
||
},
|
||
methods:{
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|