Vue 2.0中使用Vue-json-viewer 展示JSON格式数据_vue json格式化插件

最近在开发一个公司的投放管理系统的操作日志模块，要查看某条操作日志的请求参数，要将请求的参数以JSON格式的形式展示出来，于是用到了vue-json-viewer这个插件。

以下是实现的效果：

插件的使用步骤：

1. 安装vue-json-viewer插件

npm install vue-json-viewer --save

如果npm安装报错，可换成cnpm安装。

2. 引入插件

引入插件有两种方式，可以全局引入，也可以在单个页面文件中引入该插件。

如果在全局main.js中引入，那么全局可用，无需在单独页面的 components 中注入JsonViewer，可直接调用组件，代码如下：

// main.js全局引入
import Vue from 'vue'
import JsonViewer from 'vue-json-viewer'
Vue.use(JsonViewer) 

如果在单页面中只需要引入 import JsonViewer from 'vue-json-viewer' ，然后在components中注入JsonViewer 组件，即可正常使用，代码如下：

// vue单页面文件中引入
<script>
    // 引入组件
    import JsonViewer from 'vue-json-viewer'
    export default {
          // 注册组件
          components:{
              JsonViewer
          }
    }
</script>

3. 使用插件

<json-viewer :value="content" copyable theme="my-awesome-json-theme"></json-viewer>

value 代表显示的JSON数据；

copyable 表示可以复制；

theme 表示要引入的样式，引入的样式会覆盖默认的样式，如果对默认的样式不满意的话可以用这种方式进行重写，一般情况下用默认的就好，可以不用指定这个参数。

// vue单页面文件中引入
<script>
 
import '@/styles/my-awesome-json-theme.scss';
 
</script>

其他参数：