使用bin-code-editor格式化JSON字符串并在页面中展示

 

 把上面这种格式的数据像这个样子展示出来

在package.json中加入  "bin-code-editor": "^0.9.0",然后npm i 下载依赖包或者直接npm i bin-code-editor

在main.js中写入

import Vue from 'vue';
import CodeEditor from 'bin-code-editor';
import 'bin-code-editor/lib/style/index.css';
import App from './App.vue';

Vue.use(CodeEditor);

new Vue({
  el: '#app',
  render: h => h(App)
});

用法：在dialog弹窗中放置这个组件

  <div v-else class="syncParamContent">
        <!-- <pre>{{ JSON.parse(syncParamValue) }}</pre> -->
        <b-code-editor
          class="titleJson"
          v-model="syncParamValue" // 定义绑定的数据
          readonly
          :auto-format="true"
          :smart-indent="true"
          theme="material" // 支持多种主题色
          :indent-unit="4"
          :lint="false"
          height="600px"
          ref="editor"
        ></b-code-editor>
      </div>

 调整对应样式代码

.syncParamContent {
  margin-top: -28px;
  width: 100%;
  height: 600px;
  border-radius: 5px;
  padding: 5px;
  box-sizing: border-box;
  overflow-y: hidden;
  background: #f7f8fa;
}
.titleJson::v-deep .CodeMirror {
  height: 600px;
  background: #1d2129;
  font-family: Consolas, "Courier New", monospace;
  font-weight: normal;
  font-size: 13px;
  font-feature-settings: "liga" 0, "calt" 0;
  line-height: 24px;
  letter-spacing: 0px;
  border-radius: 10px;
}
::v-deep .CodeMirror-vscrollbar {
  width: 0px;
  height: 100%;
}
::v-deep .CodeMirror-vscrollbar {
  background: rgba(240, 207, 207, 1);
  border-radius: 10px;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.syncParamContent::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.syncParamContent::-webkit-scrollbar-thumb {
  background: #e5e6eb;
  border-radius: 5px;
}