安装
npm install codemirror
注意版本,不要使用新版
"codemirror": "5.65.8",
组件
<template>
<div class="in-coder-panel">
<textarea :ref="textareaRef" v-model="code" autofocus="true"></textarea>
</div>
</template>
<script type="text/ecmascript-6">
import CodeMirror from "codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/solarized.css";
import "codemirror/theme/idea.css";
import "codemirror/theme/darcula.css";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/sql-hint.js";
import "codemirror/mode/sql/sql.js";
export default {
name: "in-coder",
props: {
value: String,
textareaRef: {
type: String,
default: "",
},
},
data() {
return {
CodeMirror: null,
code: "select gg ",
coder: null,
options: {
tabSize: 2,
lineNumbers: true,
line: true,
mode: "text/x-mysql",
theme: "darcula",
readOnly: false,
lineWrapping: false,
autofocus: true,
styleActiveLine: true,
lint: true, // 代码出错提醒
matchBrackets: true,
extraKeys: { Tab: "autocomplete" }, //Tab可以弹出选择项
hintOptions: {
completeSingle: false,
alignWithWord: false,
hint: CodeMirror.hint.sql,
},
},
};
},
mounted() {
this._initialize();
},
methods: {
show() {
alert(this.code);
},
_initialize() {
this.coder = CodeMirror.fromTextArea(
this.$refs[this.textareaRef],
this.options
);
this.coder.setSize("100%", "400px");
this.coder.setValue(this.value || this.code);
this.coder.on("change", (coder, changeObj) => {
this.code = coder.getValue();
if (/^[a-zA-Z.]/.test(changeObj.text[0])) {
coder.showHint();
}
});
},
},
};
</script>
<style>
.in-coder-panel {
flex-grow: 1;
display: flex;
position: relative;
}
.CodeMirror {
flex-grow: 1;
z-index: 1;
height: auto;
}
.CodeMirror-code {
line-height: 22px;
font-size: 17px;
}
.code-mode-select {
position: absolute;
z-index: 2;
right: 10px;
top: 10px;
max-width: 130px;
}
</style>
父组件调用
import Codemirror from "@/components/common/codemirror.vue";
components: {
Codemirror,
},
<Codemirror ref="cm" textareaRef="aaa" value="--请输入查询的Sql语句"></Codemirror>
//父组件从子组件取值
this.$refs.cm.code,