vue JsonEditor 编辑器

JsonEditor 官网

做后台管理系统需要展示可视化的Json，这样方便录入人员读取。如图所示⬇️

 安装步骤

第一步：

npm i bin-code-editor -S
# or 
yarn add bin-code-editor

第二步：在main.js中引入

import CodeEditor from 'bin-code-editor';

Vue.use(CodeEditor);

 第三步：在所需的.vue文件中

<template>
 <div>
     <b-code-editor v-model="formLeft.schemaJson" theme="material" ref="schemaEditor" class="editorWidth" />
     <Button @click="formatCodeForEditor('schemaEditor')">格式化代码</Button>
 </div>

data数据： attributeJson: "",
methos方法:格式化代码的方法
formatCodeForEditor(type){
            switch(type){
            case 'datasetEditor':
                this.$refs['datasetEditor'].formatCode()
            break;
            case 'schemaEditor':
                this.$refs['schemaEditor'].formatCode()
            break;
            case 'attributeEditor':
                this.$refs['attributeEditor'].formatCode()
            break;
            case 'bandsEditor':
                this.$refs['bandsEditor'].formatCode()
            break;
            case 'relatedEditor':
                this.$refs['relatedEditor'].formatCode()
            break;
        }
        
    },

这就是简单的用于后台管理的Json展示的功能。