Skip to content

Commit ebf9444

Browse files
leezngleezng
committed
docs: Update README.
1 parent c49c65a commit ebf9444

File tree

4 files changed

+92
-45
lines changed

4 files changed

+92
-45
lines changed

‎README.md‎

Lines changed: 68 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,53 @@
1-
# vue-json-pretty
1+
<p align="center">
2+
<a href="https://github.com/leezng/vue-json-pretty">
3+
<img width="200" src="./static/logo.svg">
4+
</a>
5+
</p>
6+
7+
<h1 align="center">
8+
<a href="https://github.com/leezng/vue-json-pretty" target="_blank">Vue Json Pretty</a>
9+
</h1>
10+
11+
<div align="center">
12+
13+
A Vue component for rendering JSON data as a tree structure.
214

315
[![Build Status](https://travis-ci.org/leezng/vue-json-pretty.svg?branch=master)](https://travis-ci.org/leezng/vue-json-pretty)
416
[![npm package](https://img.shields.io/npm/v/vue-json-pretty.svg)](https://www.npmjs.org/package/vue-json-pretty)
517
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/leezng/vue-json-pretty/blob/master/LICENSE)
18+
[![Sizes](https://img.shields.io/bundlephobia/min/vue-json-pretty)](https://bundlephobia.com/result?p=vue-json-pretty)
19+
[![NPM downloads](http://img.shields.io/npm/dm/vue-json-pretty.svg?style=flat-square)](https://www.npmtrends.com/vue-json-pretty)
20+
[![Issues](https://img.shields.io/github/issues-raw/leezng/vue-json-pretty)](https://github.com/leezng/vue-json-pretty/issues)
21+
22+
</div>
23+
24+
English | [简体中文](./README-zh_CN.md)
625

7-
A vue 2.x component for rendering JSON data as a tree structure.
26+
## Features
827

9-
- As a JSON Formatter
10-
- Get item data from JSON
28+
- As a JSON Formatter.
29+
- Get item data from JSON.
30+
- Written in TypeScript with predictable static types.
31+
- Support big data.
1132

12-
## Links
33+
## Environment Support
1334

14-
- [Demo](https://leezng.github.io/vue-json-pretty)
15-
- [Github](https://github.com/leezng/vue-json-pretty)
16-
- [NPM](https://www.npmjs.com/package/vue-json-pretty)
17-
- [中文文档](./README.zh-CN.md)
35+
- Modern browsers and Internet Explorer 11 (with [polyfills](https://www.antdv.com/docs/vue/getting-started/#Compatibility))
36+
- Server-side Rendering
37+
- [Electron](https://electronjs.org/)
1838

19-
## Install
39+
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
40+
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
41+
| IE11, Edge | last 10 versions | last 10 versions | last 10 versions | last 2 versions |
42+
43+
## Using NPM or Yarn
2044

2145
```bash
22-
npm install vue-json-pretty --save
46+
$ npm install vue-json-pretty --save
47+
```
48+
49+
```bash
50+
$ yarn add vue-json-pretty
2351
```
2452

2553
## Usage
@@ -30,27 +58,23 @@ The CSS file is included separately and needs to be imported manually. You can e
3058
<template>
3159
<div>
3260
...
33-
<vue-json-pretty
34-
:path="'res'"
35-
:data="{ key: 'value' }"
36-
@click="handleClick">
37-
</vue-json-pretty>
61+
<vue-json-pretty :path="'res'" :data="{ key: 'value' }" @click="handleClick"> </vue-json-pretty>
3862
</div>
3963
</template>
4064
4165
<script>
42-
import VueJsonPretty from 'vue-json-pretty'
43-
import 'vue-json-pretty/lib/styles.css'
66+
import VueJsonPretty from 'vue-json-pretty';
67+
import 'vue-json-pretty/lib/styles.css';
4468
4569
export default {
4670
components: {
47-
VueJsonPretty
48-
}
49-
}
71+
VueJsonPretty,
72+
},
73+
};
5074
</script>
5175
```
5276

53-
## Nuxt.js
77+
## Use Nuxt.js
5478

5579
1. In `plugins/vue-json-pretty.js`
5680

@@ -77,31 +101,31 @@ plugins: [
77101
- If you are using only the normal features (JSON pretty), just focus on the `base` properties.
78102
- If you are using higher features (Get data), you can use `base` and `higher` attributes.
79103

80-
| Attribute | Level | Description | Type | Default |
81-
|-------- |-------- |-------- |-------- | -------- |
82-
| data | normal | json data | JSON object | - |
83-
| deep | normal | data depth, data larger than this depth will not be expanded | number | Infinity |
84-
| showLength | normal | whether to show the length when closed | boolean | false |
85-
| showLine | normal | whether to show the line | boolean | true |
86-
| showDoubleQuotes | normal | whether to show doublequotes on key | boolean | true |
87-
| highlightMouseoverNode | normal | highlight current node when mouseover | boolean | false |
88-
| v-model | higher | defines value when the tree can be selected | string, array | -, [] |
89-
| path | higher | root data path | string | root |
90-
| pathChecked | higher | defines the selected data path | array | [] |
91-
| pathSelectable | higher | defines whether a data path supports selection | Function(itemPath, itemData) | - |
92-
| selectableType | higher | defines the selected type, this feature is not supported by default | enum: -, multiple, single | - |
93-
| showSelectController | higher | whether to show the select controller at left | boolean | false |
94-
| selectOnClickNode | higher | whether to change selected value when click node | boolean | true |
95-
| highlightSelectedNode | higher | highlight current node when selected | boolean | true |
96-
| collapsedOnClickBrackets | higher | collapsed control | boolean | true |
97-
| customValueFormatter | higher | a function that can return different html or strings to display for values in the data. | Function(data, key, parent, defaultFormatted) | - |
104+
| Attribute | Level | Description | Type | Default |
105+
| ------------------------ | ------ | --------------------------------------------------------------------------------------- | ---------------------------------------------- | -------- |
106+
| data | normal | JSON data | JSON object | - |
107+
| deep | normal | Data depth, data larger than this depth will not be expanded | number | Infinity |
108+
| showLength | normal | Whether to show the length when closed | boolean | false |
109+
| showLine | normal | Whether to show the line | boolean | true |
110+
| showDoubleQuotes | normal | Whether to show doublequotes on key | boolean | true |
111+
| virtual | normal | Whether to use virtual scrolling, usually used for big data | boolean | false |
112+
| itemHeight | normal | The height of each item when using virtual scrolling | number | auto |
113+
| v-model | higher | Defines value when the tree can be selected | string, array | -, [] |
114+
| path | higher | root data path | string | root |
115+
| pathSelectable | higher | Defines whether a data path supports selection | Function(path, content) | - |
116+
| selectableType | higher | Defines the selected type, this feature is not supported by default | multiple, single | - |
117+
| showSelectController | higher | Whether to show the select controller at left | boolean | false |
118+
| selectOnClickNode | higher | Whether to change selected value when click node | boolean | true |
119+
| highlightSelectedNode | higher | Highlight current node when selected | boolean | true |
120+
| collapsedOnClickBrackets | higher | Collapsed control | boolean | true |
121+
| customValueFormatter | higher | A function that can return different html or strings to display for values in the data. | Function(data, key, path, defaultFormatResult) | - |
98122

99123
## Events
100124

101-
| Event Name | Description | Callback Parameters |
102-
|---------- |-------- |---------- |
103-
| click | triggered when a data item is clicked | (path, data) |
104-
| change | triggered when the selected value changed (only the selectableType not null) | (newVal, oldVal) |
125+
| Event Name | Description | Callback Parameters |
126+
| ---------- | ---------------------------------------------------------------------------- | ------------------- |
127+
| click | triggered when a data item is clicked | (path, data) |
128+
| change | triggered when the selected value changed (only the selectableType not null) | (newVal, oldVal) |
105129

106130
## Major Contributors
107131

‎README.zh-CN.md‎ renamed to ‎README.zh_CN.md‎

File renamed without changes.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-json-pretty",
3-
"version": "1.7.0-rc.2",
3+
"version": "2.0.0-rc.2",
44
"description": "A JSON tree view component that is easy to use and also supports data selection.",
55
"author": "leezng <[email protected]>",
66
"main": "lib/vue-json-pretty.js",

‎static/logo.svg‎

Lines changed: 23 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)