README.zh_CN.md

简体中文 | English

特性

• 一个 JSON 美化工具
• 使用 Typescript，提供类型描述 d.ts
• 支持字段层级数据提取
• 支持大数据虚拟滚动
• 支持编辑

Props

属性	说明	类型	默认值
data(v-model)	源数据，注意不是 JSON 字符串	JSON 数据对象	-
indent	缩进	number	2
collapsedNodeLength	长度大于此阈值的对象或数组将被折叠	number	Infinity
deep	深度，大于该深度的节点将被折叠	number	Infinity
showLength	在数据折叠的时候展示长度	boolean	false
showLine	展示标识线	boolean	true
showLineNumber	展示行计数	boolean	false
showIcon	展示图标	boolean	false
showDoubleQuotes	展示 key 名的双引号	boolean	true
virtual	使用虚拟滚动(大数据量)	boolean	false
height	使用虚拟滚动时，定义总高度	number	400
itemHeight	使用虚拟滚动时，定义节点高度(可为预估值)	number	20
dynamicHeight	使用虚拟滚动时，开启每一行可为动态高度	boolean	true
selectedValue(v-model)	双向绑定选中的数据路径	string, array	string, array
rootPath	定义最顶层数据路径	string	root
nodeSelectable	定义哪些数据节点可以被选择	function(node)	-
selectableType	定义选择功能，默认无	multiple | single	-
showSelectController	展示选择器	boolean	false
selectOnClickNode	支持点击节点的时候触发选择	boolean	true
highlightSelectedNode	支持高亮已选择节点	boolean	true
collapsedOnClickBrackets	支持点击括号折叠	boolean	true
renderNodeKey	渲染节点键，也可使用 #renderNodeKey	({ node, defaultKey }) => vNode	-
renderNodeValue	自定义渲染节点值，也可使用 #renderNodeValue	({ node, defaultValue }) => vNode	-
renderNodeActions	自定义渲染节点操作，也可使用 #renderNodeActions	boolean | ({ node, defaultActions }) => vNode	false
editable	支持可编辑	boolean	false
editableTrigger	触发编辑的时机	click | dblclick	click
theme	主题色	'light' | 'dark'	light

Events

事件名称	说明	回调参数
nodeClick	点击节点时触发	(node: NodeData)
nodeMouseover	悬浮节点时触发	(node: NodeData)
bracketsClick	点击括号时触发	(collapsed: boolean, node: NodeData)
iconClick	点击图标时触发	(collapsed: boolean, node: NodeData)
selectedChange	选中值发生变化时触发	(newVal, oldVal)

Slots

| 插槽名 | 描述 | 参数 | | ----------------- | ------------ | ---------------------------------------------- | ----- | | renderNodeKey | 渲染节点键 | { node, defaultKey } | | renderNodeValue | 渲染节点值 | { node, defaultValue } | | renderNodeActions | 渲染节点操作 | boolean | ({ node, defaultActions }) => vNode | false |