vue-codemirror代码编辑器使用方法

目录

1.下载

2.需求及使用经验

3.使用

4.效果展示

---

1.下载

npm install vue-codemirror --save

---

2.需求及使用经验

需求：

仅用于代码的展示，有折叠功能，能够高亮代码。

---

使用经验：

下方代码为完整代码，唯一需要修改的地方在于父组件传过来的数据data是一个对象，然后在init()函数中使用flowJsonData接受使用JSON序列化的数据。

还有一个问题有可能出现，就是引入问题，如果提示路径不对，那你就看看你node_modules文件夹具体在哪里。

还有一个问题，我使用的功能并不多，而这个插件的功能有100+种，如果还需要继续增加功能，就在data中的option对象中添加配置参数即可。

3.使用

我是直接在组件中使用的，以下代码稍作修改即可运行

<template>
  <el-dialog title="流程数据信息" :visible.sync="dialogVisible" width="70%">
    <el-alert
      title="使用说明"
      type="warning"
      description="nodeList 代表节点信息，lineList 代表连线信息"
      show-icon
      close-text="知道了"
    >
    </el-alert>
    <br />
    <!--一个高亮显示的插件start-->
    <codemirror
      :value="flowJsonData"
      :options="options"
      class="code"
    ></codemirror>
    <!--一个高亮显示的插件end-->
  </el-dialog>
</template>

<script>
import 'codemirror/lib/codemirror.css'//引入样式文件
import { codemirror } from 'vue-codemirror'//引入核心文件
require("codemirror/mode/javascript/javascript.js")//引入JavaScript格式结合option里面的mode使用
// 折叠功能需引入的文件start
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/foldcode'
import 'codemirror/addon/fold/foldgutter'
import 'codemirror/addon/fold/brace-fold'
import 'codemirror/addon/fold/comment-fold'
// 折叠功能需引入的文件end
export default {
  props: {
    data: Object,//父传子数据
  },
  data () {
    return {
      dialogVisible: false,
      flowJsonData: {},//将data序列化生成最终数据
      options: { //配置项
        mode: { name: "javascript", json: true },//设置语法格式这里是JavaScript
        lineNumbers: true, //显示行号
        // 代码折叠功能配置项start
        foldGutter: true,
        lineWrapping: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
        // 代码折叠功能配置项end
      }
    }
  },
  components: {
    codemirror
  },
  methods: {
    //初始化数据
    init () {
      this.dialogVisible = true//打开弹框，与本功能无关无需理会
      this.flowJsonData = JSON.stringify(this.data, null, 4).toString()//初始化核心代码
    }
  }
}
</script>
<style scoped>
::v-deep .el-dialog__header {
  padding: 10px !important;
}
</style>

4.效果展示