1.用途

用于前端页面编辑,展示代码,可以灵活选择语言,比如shell,sql,python,js等,可自定义主题及代码提示等,功能非常强大

2.效果图

我这边是用来展示sql脚本的,结合了element-ui弹出层来实现的

3.插件安装

npm install vue-codemirror --save

4.代码

html

<codemirror v-model="content" :options="options"></codemirror>

js

import {codemirror} from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
// 引入主题,配置后生效
import 'codemirror/theme/rubyblue.css'
//引入语言,配置后生效
import 'codemirror/mode/sql/sql.js'

export default {
    components: {
      codemirror
    },
    data() {
      return {
        //需编辑和显示的内容
        content: '',
        // 默认配置
        options: {
          tabSize: 2, // 缩进格式
          theme: 'rubyblue', // 指定主题，对应主题库 JS 需要提前引入
          lineNumbers: true, // 是否显示行号
          //指定语言类型,如果需要编辑和显示其他语言,需要import语言js然后修改此配置
          mode: 'sql',
          line: true,
          styleActiveLine: true, // 高亮选中行
          //是否为只读,如果为"nocursor" 不仅仅为只读 连光标都无法在区域聚焦
          readOnly: true,
          hintOptions: {
            completeSingle: true // 当匹配只有一项的时候是否自动补全
          }
        },
      }
    }
}

5.支持语言

常用语言引入方式

  import 'codemirror/mode/javascript/javascript.js'
  import 'codemirror/mode/css/css.js'
  import 'codemirror/mode/xml/xml.js'
  import 'codemirror/mode/clike/clike.js'
  import 'codemirror/mode/markdown/markdown.js'
  import 'codemirror/mode/python/python.js'
  import 'codemirror/mode/r/r.js'
  import 'codemirror/mode/shell/shell.js'
  import 'codemirror/mode/sql/sql.js'
  import 'codemirror/mode/swift/swift.js'
  import 'codemirror/mode/vue/vue.js'

支持语言

6.最后

这边只是对此组件的简单使用,如果需要高级用法(比如语言切换,动态提示等)请自行百度;