vue json数据格式化编辑插件

• 现有一个vue项目，需要一个json编辑器，能够格式化json数据，同时也支持编辑功能。

vue-json-edit

安装依赖

npminstall vue-json-editor --save

测试页面

效果图

bin-code-editor

• 官网：https://wangbin3162.gitee.io/bin-code-editor/#/jsonEditor

安装依赖

npminstall bin-code-editor -d

测试页面

效果图

CodeMirror

• 官网：https://codemirror.net/docs/guide/

• 支持代码高亮

• 62种主题颜色，例如monokai等等

• 支持json, sql, javascript，css，xml, html，yaml, markdown, python编辑模式，默认为 json

• 支持快速搜索

• 支持自动补全提示

• 支持自动匹配括号

安装依赖

• 下载时注意指定版本，且这里下载vue-codemirror，不是codemirror，两者现有版本不同，可在npm社区查看具体版本，这里我下载的是vue-codemirror4.0.6支持Vue2，默认下载是最新版本只支持Vue3。

• vue 2 使用

npminstall [email protected] jshint
npminstall jsonlint
npminstall script-loader

测试页面

效果图

vue-json-views

安装依赖

npm i -S vue-json-views 

属性说明

属性	说明	类型	默认值
json	传入的json数据（必填）	Object	-
closed	是否折叠全部	Boolean	false
deep	展开深度,越大渲染速度越慢,建议不超过5	Number	3
icon-style	折叠按钮样式，可选值为square、circle、triangle	String	square
icon-color	两个折叠按钮的颜色	Array	theme=vs-code时，[‘#c6c6c6’, ‘#c6c6c6’]，其他情况为[‘#747983’, ‘#747983’]
theme	可选主题样式,可选值为one-dark、vs-code，不选时为默认的白色主题	String	-
font-size	字体大小,单位px	Number	14
line-height	行高，单位px	Number	24

测试页面

效果图

vue-json-pretty

安装依赖

• vue2

npminstall [email protected] --save

属性说明

测试页面

效果图