目录
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>