1.npm下载

npm i -S vue-json-views

2. 可选配置说明

属性 说明 类型 默认值
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

3. 在 vue 中使用

<template>
  <div>
    <json-view :data="jsonData" deep="2" />
  </div>
</template>

<script>
import jsonView from 'vue-json-views'
export default {
  components: {
    jsonView
  },
  data() {
    return {
      jsonData: {
        name: "小明",
        age: 18,
        items3: {
          like: "pingpang",
          skip: 0,
        },
      },
    }
  },

};
</script>

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐