1.
import JsonViewer from ‘vue-json-viewer‘
只可以读:
案例:
<div style=" width: 1000px; margin: auto; margin-top: 35px;"> <json-viewer v-model="form.headers" :value="form.headers" :expand-depth=5 copyable boxed sort></json-viewer> </div>
2.可编辑json前端格式化
npm install vue-json-editor --save
import vueJsonEditor from ‘vue-json-editor‘
<vue-json-editor v-model="form.headers" :showBtns="false" :mode="‘code‘" lang="zh" @has-error="onError" ></vue-json-editor>
3.
npm install bin-code-editor -d
在 main.js 中写入2行
文档开发参数:https://wangbin3162.gitee.io/bin-code-editor/#/jsonEditor
import CodeEditor from ‘bin-code-editor‘; Vue.use(CodeEditor);
<b-code-editor v-model="jsonStr" :auto-format="true" :smart-indent="true" theme="dracula" :indent-unit="4" :line-wrap="false" ref="editor"></b-code-editor>