Vue-json-viewer 展示JSON格式数据

越陌度阡

发布于 2020-12-14 11:00:57

8K0

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

最近在开发一个公司的投放管理系统的操作日志模块，要查看某条操作日志的请求参数，要将请求的参数以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>

其他参数：

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/12/10 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

json

网络安全

npm

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

Vue-json-viewer 展示JSON格式数据

Vue-json-viewer 展示JSON格式数据

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐