vue-json-tree
Version:
Vue component that renders JSON data in a collapsible tree structure.
122 lines (117 loc) • 5.51 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>vue-json-tree</title>
<style>
#wrap { color: #35495e; font-family: 'PT Serif', serif; margin: 0 auto; width: 1000px; }
hr { border: 0; border-top: 1px solid #abc; margin: 20px 0; }
a { color: #41b883; text-decoration: none; }
</style>
<link href="https://unpkg.com/prismjs@1.20.0/themes/prism.css" rel="stylesheet">
<script src="https://unpkg.com/prismjs@1.20.0/prism.js"></script>
<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-json-tree@0.4.3/dist/json-tree.js"></script>
</head>
<body>
<div id="wrap">
<h1>vue-json-tree</h1>
<p>
<a href="https://circleci.com/gh/myst729/vue-json-tree/tree/master">
<img src="https://img.shields.io/circleci/project/myst729/vue-json-tree/master.svg" alt="CircleCI">
</a>
<a href="https://www.npmjs.com/package/vue-json-tree">
<img src="https://img.shields.io/npm/v/vue-json-tree.svg" alt="NPM">
</a>
<a href="https://github.com/myst729/Vuelog/blob/master/LICENSE">
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="LICENSE">
</a>
</p>
<h4>Vue component that renders JSON data in a collapsible tree structure.</h4>
<hr>
<h2>@usage</h2>
<h4>> Use in browsers</h4>
<p>1. Include the CSS and JS along with Vue, so you get a <code class="language-html"><json-tree></code> component.</p>
<pre><code class="language-html"><script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-json-tree@0.4.3/dist/json-tree.js"></script></code></pre>
<p>2. Instantiate the component with your data.</p>
<pre><code class="language-html"><div id="app"></div>
<script>
new Vue({
template: '<json-tree :raw="sample"></json-tree>',
el: '#app',
data: {
sample: '{"foo": "bar"}'
}
})
</script></code></pre>
<h4>> Use with webpack and vue-loader</h4>
<p>1. Install the <code class="language-bash">vue-json-tree</code> package via NPM.</p>
<pre><code class="language-bash">npm install --save vue-json-tree</code></pre>
<p>2. Import the SFC (with CSS embedded) and register it as a component, either globally or in another component.</p>
<pre><code class="language-js">import JsonTree from 'vue-json-tree'
Vue.component('json-tree', JsonTree)</code></pre>
<hr>
<h2>@props</h2>
<h4>> <code class="language-js">raw</code> (<code class="language-js">string</code>, optional)</h4>
<p>The data you want to present in the tree view. Must be a valid JSON string, otherwise it fails.</p>
<h4>> <code class="language-js">data</code> (<code class="language-js">any</code>, optional)</h4>
<p>If your JSON data has already been parsed, bind this one instead. Must be something that can be produced by <code class="language-js">JSON.parse()</code>.</p>
<h4>> <code class="language-js">level</code> (<code class="language-js">number</code>, optional)</h4>
<p>Sometimes the data structure is very deep. You could set them to collapsed on load. By default all levels are expanded.</p>
<hr>
<h2>@demo</h2>
<div id="demo"></div>
<script>
new Vue({
template: '<json-tree :raw="sample" :level="5"></json-tree>',
el: '#demo',
data: {
sample: `
{
"glossary": {
"title": "example glossary",
"gloss": {
"title": "S",
"list": {
"entry": {
"id": "SGML",
"category": "SGML",
"term": "Standard Generalized Markup Language",
"acronym": "SGML",
"abbrev": "ISO 8879:1986",
"definition": {
"description": "A meta-markup language, used to create markup languages such as DocBook.",
"relatives": [
"GML",
"XML"
]
},
"keyword": "markup"
}
}
}
}
}
`
}
})
</script>
<hr>
<h2>@development</h2>
<h4>> Want to fix bugs or implement new features?</h4>
<p>1. Grab the source code from GitHub.</p>
<pre><code class="language-bash">git clone git@github.com:myst729/vue-json-tree.git</code></pre>
<p>2. Install dependencies via NPM.</p>
<pre><code class="language-bash">npm install</code></pre>
<p>3. Run in dev mode and start to hack.</p>
<pre><code class="language-bash">npm run dev</code></pre>
<p>4. Make sure you run the tests.</p>
<pre><code class="language-bash">npm run test</code></pre>
<p>5. Build the dist files.</p>
<pre><code class="language-bash">npm run dist</code></pre>
<hr>
<p>MIT © <a href="https://myst729.github.io/"><strong>Leo Deng</strong></a> 2019</p>
</div>
</body>
</html>