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

谁践踏了优雅 2023-09-28 12:39 1阅读 0赞

**目录**

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 />
        
        <codemirror
          :value="flowJsonData"
          :options="options"
          class="code"
        ></codemirror>
        
      </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.效果展示 ###

![6dc82de1915345b1979da557dac12e3f.png][]

[6dc82de1915345b1979da557dac12e3f.png]: https://img-blog.csdnimg.cn/6dc82de1915345b1979da557dac12e3f.png