![](./src/assets/Snipaste.png)
English | 简体中文
$ npm install g-json-view --save
<template>
<div>
<g-json-view :json="{ key: 'value' }" />
</div>
</template>
<script>
import GJsonView from 'g-json-view';
export default {
components: {
GJsonView,
},
};
</script>
Property |
Description |
Type |
Default |
json |
JSON data |
JSON object |
- |
deep |
Paths greater than or equal to this depth will be collapsed |
number |
4 |
showLength |
Show the length when collapsed |
boolean |
true |
showLine |
Show the line |
boolean |
true |
showIcon |
Show the icon |
boolean |
true |
showDoubleQuotes |
Show doublequotes on key |
boolean |
true |
rootPath |
Root data path |
string |
root |
collapsedOnClickBrackets |
Support click brackets or text to collapse |
boolean |
true |
renderNodeKey |
render node key |
({ node, defaultKey }) => vNode |
- |
renderNodeValue |
render node value |
({ node, defaultValue }) => vNode |
- |
nodeClick |
triggered when a node is clicked |
({ isClosed, path }) => void |
- |
Event Name |
Description |
Parameters |
nodeClick |
triggers when click node |
(node: NodeData) |