vue-codemirror使用

最新推荐文章于 2026-05-19 13:11:22 发布

原创最新推荐文章于 2026-05-19 13:11:22 发布 · 4.3k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

vue 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中安装并使用vue-codemirror组件，包括局部和全局引入方式，以及如何配置参数实现代码高亮、主题选择等功能。

安装

npm i vue-codemirror -S

基础使用

引入
在需要的vue单页中

import {codemirror } from 'vue-codemirror' // 引入组件
import 'codemirror/lib/codemirror.css'

export default {
    name: "basic-line-configs",
    components:{
      codemirror // 声明组件
    },
}

全局引入,在main.js中

import VueCodeMirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
Vue.use(VueCodeMirror)

使用

<codemirror
      ref="chartOption"
      :value="mirrorCode"
      :options="cmOptions" 
      @change="mirrorCodeChange">
</codemirror>
 // :value 的值为字符串
 // :option 为codemirror配置

  import {codemirror } from 'vue-codemirror'
  import 'codemirror/lib/codemirror.css'
  import 'codemirror/theme/base16-light.css'

  import 'codemirror/mode/javascript/javascript.js' //
  export default {
    name: "basic-line-configs",
    components:{
      codemirror
    },
    data() {
      return {
        mirrorCode:'',
        cmOptions: {
          tabSize: 2, // Tab键空格数
          mode: 'application/json', //模式
          theme: 'base16-light', // 主题
          lineNumbers: true, //是否显示行号
          line: true,
        },
      }
    },
  }

参数配置

readOnly: boolean|string 。true只读, “nocursor”，那么除了设置只读外，编辑区域还不能获得焦点。

theme: string。引入相应主题的css，再在配置项中指定

import 'codemirror/theme/ayu-dark.css'
import 'codemirror/theme/blackboard.css'
import 'codemirror/theme/monokai.css'

高度自适应

.CodeMirror {
	border: 1px solid #eee;
    height: auto;
}
.CodeMirror-scroll {
	height: auto;
	overflow-y: hidden;
	overflow-x: auto;
}