|
|
|
|
@ -2,35 +2,23 @@
|
|
|
|
|
<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'
|
|
|
|
|
import "codemirror/lib/codemirror.css";
|
|
|
|
|
import 'codemirror/theme/idea.css'
|
|
|
|
|
import '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 "codemirror/mode/javascript/javascript"; // 代码高亮必须引入
|
|
|
|
|
//代码补全
|
|
|
|
|
import 'vue-codemirror/node_modules/codemirror/addon/hint/javascript-hint.js';
|
|
|
|
|
import '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 'codemirror/addon/hint/show-hint.js';
|
|
|
|
|
import "codemirror/keymap/sublime.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",
|
|
|
|
|
@ -61,6 +49,7 @@ export default {
|
|
|
|
|
// 当匹配只有一项的时候是否自动补全
|
|
|
|
|
completeSingle: false
|
|
|
|
|
},
|
|
|
|
|
keyMap: "sublime",
|
|
|
|
|
foldGutter: true, // 支持折叠
|
|
|
|
|
extraKeys: { 'Ctrl': 'autocomplete' }, // 可以用于为编辑器指定额外的键绑定,以及keyMap定义的键绑定
|
|
|
|
|
gutters: ['CodeMirror-linenumbers', "lock", "warn"],
|
|
|
|
|
|