Skip to content

Latest commit

 

History

History
156 lines (120 loc) · 11.7 KB

README.md

File metadata and controls

156 lines (120 loc) · 11.7 KB

A Vue component for rendering JSON data as a tree structure.

Now it supports Vue3 at least. If you still use Vue2, see 1.x.

Build Status npm package GitHub license Sizes NPM downloads Issues

English | 简体中文

Features

  • As a JSON Formatter.
  • Written in TypeScript, support d.ts.
  • Support get item data from JSON.
  • Support big data.
  • Support editable.

Environment Support

  • Modern browsers, Electron and Internet Explorer 11 (with polyfills)
  • Server-side Rendering
IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
IE11, Edge last 10 versions last 10 versions last 10 versions last 2 versions

Using NPM or Yarn

$ npm install vue-json-pretty --save
$ yarn add vue-json-pretty

Use Vue2

$ npm install vue-json-pretty@v1-latest --save

Usage

The CSS file is included separately and needs to be imported manually. You can either import CSS globally in your app (if supported by your framework) or directly from the component.

<template>
  <div>
    <vue-json-pretty :data="{ key: 'value' }" />
  </div>
</template>

<script>
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

export default {
  components: {
    VueJsonPretty,
  },
};
</script>

Use Nuxt.js

  1. In plugins/vue-json-pretty.js
import Vue from 'vue'
import VueJsonPretty from 'vue-json-pretty'

Vue.component("vue-json-pretty", VueJsonPretty)
  1. In nuxt.config.js
css: [
  'vue-json-pretty/lib/styles.css'
],
plugins: [
  '@/plugins/vue-json-pretty'
],

Props

Property Description Type Default
data(v-model) JSON data, support v-model when use editable JSON object -
collapsedNodeLength Objects or arrays which length is greater than this threshold will be collapsed number -
deep Paths greater than this depth will be collapsed number -
showLength Show the length when collapsed boolean false
showLine Show the line boolean true
showLineNumber Show the line number boolean false
showIcon Show the icon boolean false
showDoubleQuotes Show doublequotes on key boolean true
virtual Use virtual scroll boolean false
height The height of list when using virtual number 400
itemHeight The height of node when using virtual number 20
selectedValue(v-model) Selected data path string, array -
rootPath Root data path string root
nodeSelectable Defines whether a node supports selection (node) => boolean -
selectableType Support path select, default none multiple | single -
showSelectController Show the select controller boolean false
selectOnClickNode Trigger select when click node boolean true
highlightSelectedNode Support highlighting selected nodes boolean true
collapsedOnClickBrackets Support click brackets to collapse boolean true
renderNodeKey render node key, or use slot #renderNodeKey ({ node, defaultKey }) => vNode -
renderNodeValue render node value, or use slot #renderNodeValue ({ node, defaultValue }) => vNode -
editable Support editable boolean false
editableTrigger Trigger click | dblclick click
theme Sets the theme of the component. Options are 'light' or 'dark', with dark mode enhancing visibility on dark backgrounds 'light' | 'dark' light

Events

Event Name Description Parameters
nodeClick triggers when click node (node: NodeData)
bracketsClick triggers when click brackets (collapsed: boolean, node: NodeData)
iconClick triggers when click icon (collapsed: boolean, node: NodeData)
selectedChange triggers when the selected value changed (newVal, oldVal)

Slots

Slot Name Description Parameters
renderNodeKey render node key { node, defaultKey }
renderNodeValue render node value { node, defaultValue }

Contributors