对象可视化工具(Object Visualizer)
made with Vuejs

对象可视化工具(Object Visualizer)是一个将JSON对象可视化到DOM的组件，使用了Vue 3开发。

对象可视化工具(Object Visualizer)支持快捷键：

• 展开 Meta+Click
• 折叠 Meta+Shift+Click

安装

Npm

npm i object-visualizer

Yarn

yarn add object-visualizer

浏览器

<script src="https://unpkg.com/object-visualizer"></script>
<link
  type="text/css"
  rel="stylesheet"
  href="https://unpkg.com/object-visualizer/dist/index.css"
/>

使用

引入从模块中 mount函数

import { mount } from "object-visualizer";

提供插入json数据的HTML元素

//Vanilla JS
const preEl = document.getElementById("app");
//Vanilla JS new dom api
const preEl = document.querySelector("#app");
//jQuery
const preEl = $("#app");

设置数据

const data = {};

可选：让DOM可响应，只需要用reactive包裹

import { reactive } from "object-visualizer";

const data = reactive({});

使用mount方法

mount(data, preEl);

示例