JSON 预览 sv-json-view

JSON 数据可视化展示。

主要功能

本插件基于 vue3-json-view 组件改。

1. JSON 数据可展开折叠可视化展示
2. 添加容错判断，现传 json 数据、json 字符串、普通数字、普通字符串会在内部进行自动处理，无需手动预处理
3. 优化 uni_modules 规范，无需导入，直接使用
4. 修复原插件部分场景下的警告报错

强烈建议优先前往 插件市场 导入示例项目参考一下。 示例工程中插件可能不是最新版本，运行之前建议先将示例工程中插件更新至最新版本哦。

安装

1. 插件市场 中点击 下载插件并导入HBuildeX。

插件兼容性

✔️ 实测可行 ❌ 未兼容 ➖ 未实测

Vue2	Vue3	H5	App	微信小程序
❌	✔️	✔️	✔️	➖

prop 参数

参数	类型	默认值	必填	说明
type	Object/String/Number	{}	否	初始化默认内容
collapsable	Boolean	true	否	是否可折叠
fontSize	Number	24	否	字体大小，单位 rpx
icon	String	arrow	否	折叠图表，可选值：arrow/plusminus

emit 事件

无

使用示例

<template>
  <view class="content">
    <sv-json-view :obj="jsonData" :key="jsonviewKey"></sv-json-view>
    <button @click="changeValue">改变</button>
  </view>
</template>

<script setup>
import { ref } from "vue";

const jsonData = ref({
  key: "键",
  value: "值",
  obj: {
    name: "a",
    num: 1,
  },
});

// 绑定切换key值以刷新组件，用于动态切换展示的json数据
const jsonviewKey = ref(0);

function changeValue() {
  jsonData.value.obj.num++;
  jsonviewKey.value++; // 手动刷新json-view组件
}
</script>

疑难解答

可新建 Issue / 悬赏 来 发起提问

写在最后

若对插件有任何疑问或者优化建议，欢迎在 插件评论区 留言，在插件市场中的私信消息本人可能不经常留意，导致没能及时回复， 可以加入本人的插件问答 QQ 交流群: 852637893，欢迎 进群交流。