文档
https://github.com/surmon-china/vue-codemirror
https://surmon-china.github.io/vue-codemirror/
安装
npm install vue-codemirror --save
可全局或者局部注册
mount with global
// require lib import Vue from 'vue' import VueCodemirror from 'vue-codemirror' // require styles import 'codemirror/lib/codemirror.css' // require more codemirror resource... // you can set default global options and events when use Vue.use(VueCodemirror, /* { options: { theme: 'base16-dark', ... }, events: ['scroll', ...] } */)
mount with component
// require component import { codemirror } from 'vue-codemirror' // require styles import 'codemirror/lib/codemirror.css' // require more codemirror resource... // component export default { components: { codemirror } }
简单使用,配置信息参考案例,一般也不用太多配置。。。
主题的配置需要引入主题css文件,然后在设置主题,没有特别好看的。。。
<template>
<div>
<codemirror
style="width: 400px;height: 300px"
v-model="code"
:options="cmOptions">
</codemirror>
</div>
</template>
<script>
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/theme/material.css'
import {codemirror} from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
export default {
components: {
codemirror
},
data() {
return {
code: `var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})`,
cmOptions: {
tabSize: 4,
mode: 'text/javascript',
theme: 'material',
lineNumbers: true,
line: true,
}
}
},
}
</script>