1.9.4 • Published 1 year ago
Share package
English | 简体中文
Features As a JSON Formatter. 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 Firefox Chrome Safari ElectronIE11, Edge last 10 versions last 10 versions last 10 versions last 2 versions
Using NPM or Yarn $ npm install vue-json-pretty@v1-latest --save
$ yarn add vue-json-pretty@v1-latest
Use Vue3 $ npm install vue-json-pretty --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 In plugins/vue-json-pretty.js
import Vue from 'vue'
import VueJsonPretty from 'vue-json-pretty'
Vue.component("vue-json-pretty", VueJsonPretty)
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 - 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.sync Selected data path string, array - rootPath Root data path string root
nodeSelectable Defines whether a data path supports selection function(node) - 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 editable Support editable boolean false editableTrigger Trigger click
, dblclick
click
Events Event Name Description Parameters node-click triggers when click node (node: NodeData) brackets-click triggers when click brackets (collapsed: boolean) icon-click triggers when click icon (collapsed: boolean) selected-change triggers when the selected value changed (newVal, oldVal)
Slots Slot Name Description Parameters nodeKey render node key { node, defaultKey } nodeValue render node value { node, defaultValue }
Contributors