首页 前端知识 vue 使用vue-json-viewer 展示 JSON 格式数据

vue 使用vue-json-viewer 展示 JSON 格式数据

2024-04-22 09:04:06 前端知识 前端哥 742 207 我要收藏

vue 使用vue-json-viewer 展示 JSON 格式数据

  • 1、安装 vue-json-viewer插件
  • 2、引入插件并注册
    • 2.1 全局注册组件
    • 2.2 单个页面局部引入
  • 3、插件的基础使用
  • 4、插件可选配置说明
    • 4.1 选项
  • 4.2 事件
  • 4.3 Slots
  • 4.4 主题
  • 5、实现效果

1、安装 vue-json-viewer插件

npm install vue-json-viewer --save

官网地址: https://www.npmjs.com/package/vue-json-viewer

2、引入插件并注册

2.1 全局注册组件

在全局 main.js 中引入,在 main.js 文件中添加:

import JsonViewer from 'vue-json-viewer'
Vue.use(JsonViewer)

2.2 单个页面局部引入

import JsonViewer from 'vue-json-viewer'
export default {
   components:{ JsonViewer }
}

3、插件的基础使用

    <json-viewer
      :value="JSON.parse(jsonStr)"
      :expand-depth="5"
      boxed
      sort
      :show-array-index="false"
      copyable
    >
      <template slot="copy">
        <i class="el-icon-document-copy" title="复制"></i>
      </template>
    </json-viewer>
....
data(){
    return{
        jsonStr:"{\r\n    \"success\": true,\r\n    \"code\": 200,\r\n    \"msg\": \"操作成功\",\r\n    \"data\": \"\"\r\n}"
    }
}

4、插件可选配置说明

4.1 选项

属性描述默认值
valuejson对象的值,可以使用v-model,支持响应式必填
expand-depth默认展开的层级1
copyable展示复制按钮,默认文案为:copy、copied!, 你可以设置一个对象{copyText: ‘copy’, copiedText: ‘copied’} 来自定义复制按钮文案false
sort按照key排序展示false
boxed为组件添加一个盒样式false
theme添加一个自定义的样式class用作主题 jv-light
expanded默认展开视图false
timeformat自定义时间格式函数time => time.toLocaleString()
preview-mode不可折叠模式,默认全部展开alse
show-array-index是否显示数组索引true
show-double-quotes展示key双引号false

4.2 事件

事件描述
copied复制文本后的事件
keyclick点击key的事件

4.3 Slots

名称描述Scope
copy自定义拷贝按钮{copied: boolean}

4.4 主题

有两个办法创建自定义主题, (e.g. my-awesome-json-theme):

  1. 添加 theme=“my-awesome-json-theme” JsonViewer的组件属性
  2. 添加 theme=“my-awesome-json-theme” JsonViewer的组件属性
// 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-number-float { color: #fc1e70 }
    &.jv-number-integer { 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;
        }
      }
    }
  }
}

5、实现效果

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5749.html
标签
评论
发布的文章

JavaScript-jQuery1-笔记

2024-04-30 11:04:12

【Jquery简易图床源码】

2024-04-30 11:04:08

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!