vue-json-viewer实现JSON数据的高亮、可折叠、可复制功能

最近在开发一个公司的管理系统的操作日志模块,需要查看某条日志的时候,要将请求数据以JSON格式展示出来,于是就用到了vue-json-viewer这个组件,特此整理学习。

以下是实现的效果:

vue-json-viewer实现JSON数据的高亮、可折叠、可复制功能

使用步骤:

1. 安装vue-json-viewer组件

npm install vue-json-viewer --save

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 表示要引入的样式,引入的样式会覆盖默认的样式,如果对默认的样式不满意的话可以用这种方式进行重写,一般情况下用默认的就好,可以不用指定这个参数。

主题

添加 theme="my-awesome-json-theme" JsonViewer的组件属性,

复制粘贴下面的模板并且根据自定义的theme名称做对应调整:

// values are default one from jv-light template
.my-awesome-json-theme {
  background: #fff;
  white-space: nowrap;
  color: #525252;
  font-size: 14px;
  font-family: Consolas, Menlo, Courier, monospace;
  .jv-ellipsis {
    color: #999;
    background-color: #eee;
    display: inline-block;
    line-height: 0.9;
    font-size: 0.9em;
    padding: 0px 4px 2px 4px;
    border-radius: 3px;
    vertical-align: 2px;
    cursor: pointer;
    user-select: none;
  }
  .jv-button { color: #49b3ff }
  .jv-key { color: #111111 }
  .jv-item {
    &.jv-array { color: #111111 }
    &.jv-boolean { color: #fc1e70 }
    &.jv-function { color: #067bca }
    &.jv-number { color: #fc1e70 }
    &.jv-object { color: #111111 }
    &.jv-undefined { color: #e08331 }
    &.jv-string {
      color: #42b983;
      word-break: break-word;
      white-space: normal;
    }
  }
  .jv-code {
    .jv-toggle {
      &:before {
        padding: 0px 2px;
        border-radius: 2px;
      }
      &:hover {
        &:before {
          background: #eee;
        }
      }
    }
  }
}

其他参数选项

属性 描述 默认值
value json对象的值,可以使用v-model,支持响应式 必填
expand-depth 默认展开的层级 1
copyable 展示复制按钮,默认文案为:copy、copied!, 你可以设置一个对象{copyText: 'copy', copiedText: 'copied'} 来自定义复制按钮文案 false
sort 按照key排序展示 false
boxed 为组件添加一个盒样式 false
theme 添加一个自定义的样式class用作主题 jv-light

相关链接

Github 地址:点击这里

NPM 地址:点击这里

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » vue-json-viewer实现JSON数据的高亮、可折叠、可复制功能

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们