codemirror展示流程信息

codemirror是一个代码编辑器js库，支持语法高亮、自动缩进、智能提示等功能。

官方文档：codemirror.net/

项目中有用到codemirror做简单的信息展示，现在先把基本用法记录记录一下。

1.通过npm 安装插件

npm install vue-codemirror -S

2.在页面中引入对应的文件

import "codemirror/lib/codemirror.css";
import { codemirror } from "vue-codemirror";

3.在代码中的使用

<codemirror
    :value="data"
    :options="options"
    class="code"
></codemirror>

data(){
    return {
        data:{},
        options: { 
            mode: { name: "javascript", json: true },
            lineNumbers: true,
        },
    }
}

项目中要展示的是json数据，需要对传过来的json数据进行转换，转换成字符串

methods:{
    show(data) {
        this.data = JSON.stringify(data, null, 4).toString();
    }
}

至此，基本的展示功能已完成。