mirror of
https://github.com/tenrok/vue-json-viewer.git
synced 2026-06-08 17:22:32 +03:00
Merge pull request #2 from stafyniaksacha/2.x
New release proposal (2.x)
This commit is contained in:
陈峰
@@ -1,55 +1,182 @@
|
||||
# vue-json-viewer
|
||||
|
||||
Simple json display component, based on vue
|
||||
Simple JSON viewer component, for Vue.js 2
|
||||
|
||||
## Installing:
|
||||
- [Installing](#installing)
|
||||
- [Example](#example)
|
||||
- [Options](#options)
|
||||
- [Theming](#theming)
|
||||
|
||||
## Installing
|
||||
Using npm:
|
||||
```
|
||||
$ npm install vue-json-viewer
|
||||
```
|
||||
Using bower:
|
||||
$ npm install vue-json-viewer --save
|
||||
```
|
||||
|
||||
|
||||
```
|
||||
Using yarn:
|
||||
```
|
||||
$ yarn add vue-json-viewer
|
||||
```
|
||||
|
||||
## Example:
|
||||
## Example
|
||||
|
||||
``` html
|
||||
<json-viewer :value="jsonData" :show-copy="true" icon-prefix="ion" :show-bigger="true"></json-viewer>
|
||||
``` html
|
||||
<json-viewer :value="jsonData"></json-viewer>
|
||||
|
||||
<hr />
|
||||
|
||||
<json-viewer
|
||||
:value="jsonData"
|
||||
:expand-depth=5
|
||||
copyable
|
||||
boxed
|
||||
sort></json-viewer>
|
||||
```
|
||||
|
||||
``` js
|
||||
export default {
|
||||
name: 'Page',
|
||||
import Vue from 'vue'
|
||||
import JsonViewer from '../lib'
|
||||
|
||||
// Import JsonViewer as a Vue.js plugin
|
||||
Vue.use(JsonViewer)
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
jsonData: {
|
||||
name: [
|
||||
{key: 2},
|
||||
{key: 'hello word'},
|
||||
],
|
||||
val: {
|
||||
b: 'a',
|
||||
a: 'hello word',
|
||||
asd2: 1,
|
||||
asd: false
|
||||
total: 25,
|
||||
limit: 10,
|
||||
skip: 0,
|
||||
links: {
|
||||
previous: undefined,
|
||||
next: function () {},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
id: '5968fcad629fa84ab65a5247',
|
||||
firstname: 'Ada',
|
||||
lastname: 'Lovelace',
|
||||
awards: null,
|
||||
known: [
|
||||
'mathematics',
|
||||
'computing'
|
||||
],
|
||||
position: {
|
||||
lat: 44.563836,
|
||||
lng: 6.495139
|
||||
},
|
||||
description: `Augusta Ada King, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer,
|
||||
chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer,
|
||||
the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation,
|
||||
and published the first algorithm intended to be carried out by such a machine.
|
||||
As a result, she is sometimes regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.`,
|
||||
bornAt: '1815-12-10T00:00:00.000Z',
|
||||
diedAt: '1852-11-27T00:00:00.000Z'
|
||||
}, {
|
||||
id: '5968fcad629fa84ab65a5246',
|
||||
firstname: 'Grace',
|
||||
lastname: 'Hopper',
|
||||
awards: [
|
||||
'Defense Distinguished Service Medal',
|
||||
'Legion of Merit',
|
||||
'Meritorious Service Medal',
|
||||
'American Campaign Medal',
|
||||
'World War II Victory Medal',
|
||||
'National Defense Service Medal',
|
||||
'Armed Forces Reserve Medal',
|
||||
'Naval Reserve Medal',
|
||||
'Presidential Medal of Freedom'
|
||||
],
|
||||
known: null,
|
||||
position: {
|
||||
lat: 43.614624,
|
||||
lng: 3.879995
|
||||
},
|
||||
description: `Grace Brewster Murray Hopper (née Murray; December 9, 1906 – January 1, 1992)
|
||||
was an American computer scientist and United States Navy rear admiral.
|
||||
One of the first programmers of the Harvard Mark I computer,
|
||||
she was a pioneer of computer programming who invented one of the first compiler related tools.
|
||||
She popularized the idea of machine-independent programming languages, which led to the development of COBOL,
|
||||
an early high-level programming language still in use today.`,
|
||||
bornAt: '1815-12-10T00:00:00.000Z',
|
||||
diedAt: '1852-11-27T00:00:00.000Z'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
### Preview
|
||||
|
||||
|
||||
|
||||
## Options
|
||||
|
||||
| Property | Description | Default |
|
||||
| ----------- |:------------- | ----------- |
|
||||
| `value` | JSON data (can be used with `v-model`) | **Required** |
|
||||
| `expand-depth` | Collapse blocs under this depth | `1` |
|
||||
| `copyable` | Display the copy button | `false` |
|
||||
| `sort` | Sort keys before displaying | `false` |
|
||||
| `boxed` | Add a fancy "boxed" style to component | `false` |
|
||||
| `theme` | Add a custom CSS class for theming purposes | `jv-light` |
|
||||
|
||||
## Theming
|
||||
|
||||
To create custom theme, (e.g. `my-awesome-json-theme`), in two easy steps:
|
||||
1. add `theme="my-awesome-json-theme"` to the JsonViewer component
|
||||
2. copy-pasta and customize this SCSS template:
|
||||
|
||||
``` scss
|
||||
// values are default one from jv-light template
|
||||
.my-awesome-json-theme {
|
||||
background: #fff;
|
||||
white-space: nowrap;
|
||||
color: #525252;
|
||||
font-size: 14px;
|
||||
font-family: Consolas, Menlo, Courier, monospace;
|
||||
|
||||
.jv-ellipsis {
|
||||
color: #999;
|
||||
background-color: #eee;
|
||||
display: inline-block;
|
||||
line-height: 0.9;
|
||||
font-size: 0.9em;
|
||||
padding: 0px 4px 2px 4px;
|
||||
border-radius: 3px;
|
||||
vertical-align: 2px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.jv-button { color: #49b3ff }
|
||||
.jv-key { color: #111111 }
|
||||
.jv-item {
|
||||
&.jv-array { color: #111111 }
|
||||
&.jv-boolean { color: #fc1e70 }
|
||||
&.jv-function { color: #067bca }
|
||||
&.jv-number { color: #fc1e70 }
|
||||
&.jv-object { color: #111111 }
|
||||
&.jv-undefined { color: #e08331 }
|
||||
&.jv-string {
|
||||
color: #42b983;
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
.jv-code {
|
||||
.jv-toggle {
|
||||
&:before {
|
||||
padding: 0px 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
&:hover {
|
||||
&:before {
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
## Result:
|
||||
|
||||
|
||||
|
||||
## Options:
|
||||
|
||||
| Property | Description |
|
||||
| ----------- |:-------------|
|
||||
| value | json data |
|
||||
| show-copy | display the copy button |
|
||||
| show-bigger | display the bigger button |
|
||||
| icon-prefix | Custom Font icon prefix |
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
import Vue from 'vue'
|
||||
import JsonViewer from '../lib'
|
||||
|
||||
Vue.use(JsonViewer)
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
jsonData: {
|
||||
total: 25,
|
||||
limit: 10,
|
||||
skip: 0,
|
||||
links: {
|
||||
previous: undefined,
|
||||
next: function () {},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
id: '5968fcad629fa84ab65a5247',
|
||||
firstname: 'Ada',
|
||||
lastname: 'Lovelace',
|
||||
awards: null,
|
||||
known: [
|
||||
'mathematics',
|
||||
'computing'
|
||||
],
|
||||
position: {
|
||||
lat: 44.563836,
|
||||
lng: 6.495139
|
||||
},
|
||||
description: `Augusta Ada King, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer,
|
||||
chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer,
|
||||
the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation,
|
||||
and published the first algorithm intended to be carried out by such a machine.
|
||||
As a result, she is sometimes regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.`,
|
||||
bornAt: '1815-12-10T00:00:00.000Z',
|
||||
diedAt: '1852-11-27T00:00:00.000Z'
|
||||
}, {
|
||||
id: '5968fcad629fa84ab65a5246',
|
||||
firstname: 'Grace',
|
||||
lastname: 'Hopper',
|
||||
awards: [
|
||||
'Defense Distinguished Service Medal',
|
||||
'Legion of Merit',
|
||||
'Meritorious Service Medal',
|
||||
'American Campaign Medal',
|
||||
'World War II Victory Medal',
|
||||
'National Defense Service Medal',
|
||||
'Armed Forces Reserve Medal',
|
||||
'Naval Reserve Medal',
|
||||
'Presidential Medal of Freedom'
|
||||
],
|
||||
known: null,
|
||||
position: {
|
||||
lat: 43.614624,
|
||||
lng: 3.879995
|
||||
},
|
||||
description: `Grace Brewster Murray Hopper (née Murray; December 9, 1906 – January 1, 1992)
|
||||
was an American computer scientist and United States Navy rear admiral.
|
||||
One of the first programmers of the Harvard Mark I computer,
|
||||
she was a pioneer of computer programming who invented one of the first compiler related tools.
|
||||
She popularized the idea of machine-independent programming languages, which led to the development of COBOL,
|
||||
an early high-level programming language still in use today.`,
|
||||
bornAt: '1815-12-10T00:00:00.000Z',
|
||||
diedAt: '1852-11-27T00:00:00.000Z'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -2,14 +2,14 @@ const path = require('path');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
|
||||
module.exports = {
|
||||
entry: './examples/app.js',
|
||||
entry: './example/app.js',
|
||||
output: {
|
||||
path: path.join(__dirname, '../dist'),
|
||||
filename: 'main.js'
|
||||
},
|
||||
devtool: 'cheap-module-source-map',
|
||||
devServer: {
|
||||
port: 8080
|
||||
port: 8081
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js', '.vue'],
|
||||
@@ -59,8 +59,8 @@ module.exports = {
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
filename: 'index.html',
|
||||
template: './examples/index.html',
|
||||
template: './example/index.html',
|
||||
inject: true
|
||||
}),
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>vue-json-viewer - example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<json-viewer :value="jsonData"></json-viewer>
|
||||
|
||||
<hr />
|
||||
|
||||
<json-viewer
|
||||
:value="jsonData"
|
||||
:expand-depth=5
|
||||
copyable
|
||||
boxed
|
||||
sort></json-viewer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
@@ -1,24 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
import JsonViewer from '../';
|
||||
import './css/ionicons.css';
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
jsonData: {
|
||||
name: [
|
||||
{key: 2},
|
||||
{key: 'hello word'},
|
||||
],
|
||||
val: {
|
||||
b: 'a',
|
||||
a: 'hello word',
|
||||
asd2: 1,
|
||||
asd: false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {JsonViewer}
|
||||
})
|
||||
File diff suppressed because one or more lines are too long
Vendored
-11
File diff suppressed because one or more lines are too long
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 326 KiB |
Binary file not shown.
Binary file not shown.
@@ -1,14 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>examples</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<json-viewer :value="jsonData" :show-copy="true" icon-prefix="ion" :show-bigger="true"></json-viewer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,6 +0,0 @@
|
||||
import JsonView from './json-viewer';
|
||||
|
||||
const install = (Vue) => {
|
||||
Vue.components('JsonViewer', JsonView);
|
||||
}
|
||||
export default Object.assign(JsonView, {install});
|
||||
@@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<div class="node">
|
||||
<span class="key" v-if="keyName">
|
||||
<j-icon v-if="isObject" :type="value ? 'arrow-down-b' : 'arrow-up-b'" @click.stop="toggleNode"></j-icon>
|
||||
{{keyName}}:
|
||||
</span>
|
||||
<commponent :is="`Json${valueType}`" :json-value="value" v-model="toggle" :key-name="keyName"></commponent>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JIcon from './json-icon'
|
||||
import JsonString from './types/json-string';
|
||||
import JsonNumber from './types/json-number';
|
||||
import JsonBoolean from './types/json-boolean';
|
||||
import JsonObject from './types/json-object';
|
||||
import JsonArray from './types/json-array';
|
||||
|
||||
export default {
|
||||
name: 'JsonBox',
|
||||
props: {
|
||||
value: [Object, Array, String, Number, Boolean],
|
||||
keyName: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
toggle: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleNode() {
|
||||
this.toggle = !this.toggle;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
valueType() {
|
||||
if (Array.isArray(this.value)) {
|
||||
return 'Array';
|
||||
} else if (typeof this.value === 'object') {
|
||||
return 'Object';
|
||||
} else if (typeof this.value === 'number') {
|
||||
return 'Number';
|
||||
} else if (typeof this.value === 'string') {
|
||||
return 'String';
|
||||
} else if (typeof this.value === 'boolean') {
|
||||
return 'Boolean';
|
||||
}
|
||||
},
|
||||
isObject() {
|
||||
return this.valueType == 'Array' || this.valueType == 'Object'; // eslint-disable-line
|
||||
}
|
||||
},
|
||||
components: {
|
||||
JsonString,
|
||||
JsonNumber,
|
||||
JsonBoolean,
|
||||
JsonObject,
|
||||
JsonArray,
|
||||
JIcon
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.node {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
color: #525252;
|
||||
font-family: Consolas,Menlo,Courier,monospace;
|
||||
white-space: nowrap;
|
||||
|
||||
&:after {
|
||||
content: ','
|
||||
}
|
||||
&:last-of-type {
|
||||
&:after {
|
||||
content: ''
|
||||
}
|
||||
}
|
||||
.j-icon {
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
top: 3px;
|
||||
color: #80848f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& .node {
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<i class="j-icon" :class="{
|
||||
[`${iconPrefix}`]: true,
|
||||
[`${iconPrefix}-${type}`]: true
|
||||
}" @click="iconClick"></i>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JsonIcon',
|
||||
inject: ['iconPrefix'],
|
||||
props: {
|
||||
iconPrefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
iconClick(e) {
|
||||
this.$emit('click', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
-156
@@ -1,156 +0,0 @@
|
||||
<template>
|
||||
<div class="json-viewer">
|
||||
<div class="tooltip">
|
||||
<j-icon v-if="showBigger" type="qr-scanner" @click="bigger"></j-icon>
|
||||
<j-icon v-if="copied" class="copied" type="checkmark"></j-icon>
|
||||
<j-icon v-if="showCopy && !copied" class="copy" type="clipboard" @click="clip"></j-icon>
|
||||
</div>
|
||||
<div class="code-box" :class="{'more': moreCode}">
|
||||
<json-box :value="value" :key-name="keyName"></json-box>
|
||||
</div>
|
||||
<div class="more-code" @click="toggleMoreCode">
|
||||
<j-icon :type="moreCode ? 'ios-arrow-up' : 'ios-arrow-down'"></j-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import JIcon from './json-icon'
|
||||
import JsonBox from './json-box';
|
||||
import Clipboard from 'clipboard';
|
||||
|
||||
Vue.component(JsonBox.name, JsonBox);
|
||||
|
||||
export default {
|
||||
name: 'JsonViewer',
|
||||
props: {
|
||||
value: [Object, Array, String, Number, Boolean],
|
||||
keyName: String,
|
||||
showCopy: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showBigger: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
iconPrefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
iconPrefix: this.iconPrefix || 'ion'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
copied: false,
|
||||
biggerModal: false,
|
||||
moreCode: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
clip() {
|
||||
const clipBoard = new Clipboard('.copy', {
|
||||
text: () => {
|
||||
return JSON.stringify(this.value, null, 2);
|
||||
}
|
||||
});
|
||||
|
||||
clipBoard.on('success', () => {
|
||||
this.copied = true;
|
||||
setTimeout(() => {
|
||||
this.copied = false;
|
||||
}, 2000);
|
||||
this.$emit('copied');
|
||||
clipBoard.destroy();
|
||||
});
|
||||
},
|
||||
bigger() {
|
||||
this.biggerModal = true;
|
||||
},
|
||||
toggleMoreCode() {
|
||||
this.moreCode = !this.moreCode;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
JsonBox,
|
||||
JIcon
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.json-viewer {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
box-shadow:0 2px 7px rgba(0,0,0,.15);border-color:transparent;position:relative
|
||||
}
|
||||
.code-box {
|
||||
max-height: 300px;
|
||||
overflow: hidden;
|
||||
padding: 20px;
|
||||
|
||||
&.more {
|
||||
max-height: initial;
|
||||
overflow: visible;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.more-code {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
.j-icon {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
box-shadow: inset 0 -15px 30px #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 5px;
|
||||
color: #b2b2b2;
|
||||
cursor: pointer;
|
||||
|
||||
.copied {
|
||||
color: #19be6b;
|
||||
}
|
||||
|
||||
.j-icon {
|
||||
margin-left: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.j-icon {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,7 @@
|
||||
import JsonView from './json-viewer'
|
||||
|
||||
const install = Vue => {
|
||||
Vue.component('JsonViewer', JsonView)
|
||||
}
|
||||
|
||||
export default Object.assign(JsonView, { install })
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div class="jv-node">
|
||||
<span class="jv-toggle" :class="{open: !!expand}" v-if="keyName && isObject" @click.stop="toggleNode"></span>
|
||||
<span class="jv-key" v-if="keyName">
|
||||
{{keyName}}:
|
||||
</span>
|
||||
<commponent
|
||||
:expand.sync="expand"
|
||||
:is="`Json${valueType}`"
|
||||
:json-value="value"
|
||||
:key-name="keyName"
|
||||
:sort="sort"
|
||||
:depth="depth"></commponent>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JsonString from './types/json-string'
|
||||
import JsonUndefined from './types/json-undefined'
|
||||
import JsonNumber from './types/json-number'
|
||||
import JsonBoolean from './types/json-boolean'
|
||||
import JsonObject from './types/json-object'
|
||||
import JsonArray from './types/json-array'
|
||||
import JsonFunction from './types/json-function'
|
||||
|
||||
export default {
|
||||
name: 'JsonBox',
|
||||
inject: ['expandDepth'],
|
||||
props: {
|
||||
value: [Object, Array, String, Number, Boolean, Function],
|
||||
keyName: String,
|
||||
sort: Boolean,
|
||||
depth: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
expand: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleNode() {
|
||||
this.expand = !this.expand
|
||||
|
||||
try {
|
||||
this.$el.dispatchEvent(new Event("resized"))
|
||||
} catch (e) {
|
||||
// handle IE not supporting Event constructor
|
||||
var evt = document.createEvent("Event")
|
||||
evt.initEvent("resized", true, false)
|
||||
this.$el.dispatchEvent(evt)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.expand = this.depth >= this.expandDepth ? false : true
|
||||
},
|
||||
computed: {
|
||||
valueType() {
|
||||
if (this.value === null || this.value === undefined) {
|
||||
return 'Undefined'
|
||||
} else if (Array.isArray(this.value)) {
|
||||
return 'Array'
|
||||
} else if (typeof this.value === 'object') {
|
||||
return 'Object'
|
||||
} else if (typeof this.value === 'number') {
|
||||
return 'Number'
|
||||
} else if (typeof this.value === 'string') {
|
||||
return 'String'
|
||||
} else if (typeof this.value === 'boolean') {
|
||||
return 'Boolean'
|
||||
} else if (typeof this.value === 'function') {
|
||||
return 'Function'
|
||||
}
|
||||
},
|
||||
isObject() {
|
||||
return this.valueType == 'Array' || this.valueType == 'Object'; // eslint-disable-line
|
||||
}
|
||||
},
|
||||
components: {
|
||||
JsonString,
|
||||
JsonNumber,
|
||||
JsonBoolean,
|
||||
JsonObject,
|
||||
JsonArray,
|
||||
JsonFunction,
|
||||
JsonUndefined
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.jv-node {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: ','
|
||||
}
|
||||
&:last-of-type {
|
||||
&:after {
|
||||
content: ''
|
||||
}
|
||||
}
|
||||
|
||||
& .jv-node {
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<div :class="jvClass">
|
||||
<div class="jv-tooltip" v-if="copyable">
|
||||
<span class="jv-button" ref="clip" @click="clip" :class="{copied}">{{ copied ? 'copied!' : 'copy' }}</span>
|
||||
</div>
|
||||
<div class="jv-code" :class="{'open': expandCode}">
|
||||
<json-box
|
||||
ref="jsonBox"
|
||||
:value="value"
|
||||
:key-name="keyName"
|
||||
:sort="sort"></json-box>
|
||||
</div>
|
||||
<div v-if="expandableCode" class="jv-more" @click="toggleExpandCode">
|
||||
<span class="jv-toggle" :class="{open: !!expandCode}"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import JsonBox from './json-box'
|
||||
import Clipboard from 'clipboard'
|
||||
|
||||
Vue.component(JsonBox.name, JsonBox)
|
||||
|
||||
export default {
|
||||
name: 'JsonViewer',
|
||||
props: {
|
||||
value: [Object, Array, String, Number, Boolean],
|
||||
keyName: String,
|
||||
expandDepth: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
copyable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
sort: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
boxed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
default: 'jv-light'
|
||||
},
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
expandDepth: this.expandDepth,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
copied: false,
|
||||
expandableCode: false,
|
||||
expandCode: false
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.onResized()
|
||||
this.$el.addEventListener("resized", this.onResized, true)
|
||||
},
|
||||
computed: {
|
||||
jvClass() {
|
||||
return 'jv-container ' + this.theme + (this.boxed ? ' boxed' : '')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onResized() {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.jsonBox.$el.clientHeight >= 250) {
|
||||
this.expandableCode = true
|
||||
} else {
|
||||
this.expandableCode = false
|
||||
}
|
||||
})
|
||||
},
|
||||
clip() {
|
||||
if (this.copied) {
|
||||
return
|
||||
}
|
||||
|
||||
const clipBoard = new Clipboard(this.$refs.clip, {
|
||||
text: () => {
|
||||
return JSON.stringify(this.value, null, 2)
|
||||
}
|
||||
})
|
||||
|
||||
clipBoard.on('success', () => {
|
||||
this.copied = true
|
||||
setTimeout(() => {
|
||||
this.copied = false
|
||||
}, 2000)
|
||||
this.$emit('copied')
|
||||
clipBoard.destroy()
|
||||
})
|
||||
},
|
||||
toggleExpandCode() {
|
||||
this.expandCode = !this.expandCode
|
||||
}
|
||||
},
|
||||
components: {
|
||||
JsonBox
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.jv-container {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
&.boxed {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 7px rgba(0,0,0,.15);
|
||||
border-color: transparent;
|
||||
position: relative
|
||||
}
|
||||
}
|
||||
|
||||
&.jv-light {
|
||||
background: #fff;
|
||||
white-space: nowrap;
|
||||
color: #525252;
|
||||
font-size: 14px;
|
||||
font-family: Consolas, Menlo, Courier, monospace;
|
||||
|
||||
.jv-ellipsis {
|
||||
color: #999;
|
||||
background-color: #eee;
|
||||
display: inline-block;
|
||||
line-height: 0.9;
|
||||
font-size: 0.9em;
|
||||
padding: 0px 4px 2px 4px;
|
||||
border-radius: 3px;
|
||||
vertical-align: 2px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.jv-button { color: #49b3ff }
|
||||
.jv-key { color: #111111 }
|
||||
.jv-item {
|
||||
&.jv-array { color: #111111 }
|
||||
&.jv-boolean { color: #fc1e70 }
|
||||
&.jv-function { color: #067bca }
|
||||
&.jv-number { color: #fc1e70 }
|
||||
&.jv-object { color: #111111 }
|
||||
&.jv-undefined { color: #e08331 }
|
||||
&.jv-string {
|
||||
color: #42b983;
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
.jv-code {
|
||||
.jv-toggle {
|
||||
&:before {
|
||||
padding: 0px 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
&:hover {
|
||||
&:before {
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jv-code {
|
||||
max-height: 300px;
|
||||
overflow: hidden;
|
||||
padding: 20px;
|
||||
|
||||
&.open {
|
||||
max-height: initial;
|
||||
overflow: visible;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.jv-toggle {
|
||||
cursor: pointer;
|
||||
|
||||
&:before {
|
||||
content: "⏷";
|
||||
padding: 0px 2px;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
}
|
||||
&:after {
|
||||
content: " ";
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
&.open {
|
||||
&:before {
|
||||
content: "⏶";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jv-more {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
.jv-toggle {
|
||||
position: relative;
|
||||
top:40%;
|
||||
z-index: 2;
|
||||
color: #888;
|
||||
transition: all 0.1s;
|
||||
// background: red;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(230, 230, 230, 1) 100%);
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.jv-toggle {
|
||||
top:50%;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(230, 230, 230, 0.3) 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jv-button {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
z-index: 5;
|
||||
|
||||
&.copied {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.jv-tooltip {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.j-icon {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<span>
|
||||
<span class="jv-toggle" :class="{open: !!expand}" v-if="!keyName" @click.stop="toggle"></span>
|
||||
<span class="jv-item jv-array">[</span>
|
||||
<template v-if="jsonValue.length">
|
||||
<json-box
|
||||
v-show="expand"
|
||||
v-for="(val, index) in ordered"
|
||||
:sort="sort"
|
||||
:key="index"
|
||||
:value="val"
|
||||
:depth="depth + 1"></json-box>
|
||||
<span
|
||||
v-show="!expand"
|
||||
class="jv-ellipsis"
|
||||
@click.stop="toggle"
|
||||
:title="!expand ? `click to reveal ${jsonValue.length} hidden items` : ''">...</span>
|
||||
</template>
|
||||
<span class="jv-item jv-array"Z>]</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JsonArray',
|
||||
props: {
|
||||
jsonValue: Array,
|
||||
keyName: String,
|
||||
sort: Boolean,
|
||||
expand: Boolean,
|
||||
depth: Number
|
||||
},
|
||||
computed: {
|
||||
ordered () {
|
||||
if (!this.sort) {
|
||||
return this.jsonValue
|
||||
}
|
||||
|
||||
return this.jsonValue.sort()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle() {
|
||||
this.$emit('update:expand', !this.expand)
|
||||
|
||||
try {
|
||||
this.$el.dispatchEvent(new Event("resized"))
|
||||
} catch (e) {
|
||||
// handle IE not supporting Event constructor
|
||||
var evt = document.createEvent("Event")
|
||||
evt.initEvent("resized", true, false)
|
||||
this.$el.dispatchEvent(evt)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<span class="jv-item jv-boolean">{{jsonValue}}</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JsonBoolean',
|
||||
props: {
|
||||
jsonValue: Boolean
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<span class="jv-item jv-function"><function></span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JsonFunction',
|
||||
props: {
|
||||
jsonValue: Function
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<span class="jv-item jv-number">{{jsonValue}}</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JsonNumber',
|
||||
props: {
|
||||
jsonValue: Number
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<span>
|
||||
<span class="jv-toggle" :class="{open: !!expand}" v-if="!keyName" @click.stop="toggle"></span>
|
||||
<span class="jv-item jv-object">{</span>
|
||||
<template v-if="Object.keys(ordered).length">
|
||||
<json-box
|
||||
v-show="expand"
|
||||
v-for="(v, k) in ordered"
|
||||
:sort="sort"
|
||||
:key="k"
|
||||
:key-name="k"
|
||||
:value="v"
|
||||
:depth="depth + 1"></json-box>
|
||||
<span
|
||||
v-show="!expand"
|
||||
class="jv-ellipsis"
|
||||
@click.stop="toggle"
|
||||
:title="!expand ? `click to reveal object content (keys: ${Object.keys(ordered).join(', ')})` : ''">...</span>
|
||||
</template>
|
||||
<span class="jv-item jv-object">}</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JsonObject',
|
||||
props: {
|
||||
jsonValue: Object,
|
||||
keyName: String,
|
||||
expand: Boolean,
|
||||
sort: Boolean,
|
||||
depth: Number
|
||||
},
|
||||
computed: {
|
||||
ordered () {
|
||||
if (!this.sort) {
|
||||
return this.jsonValue
|
||||
}
|
||||
|
||||
const ordered = {}
|
||||
Object.keys(this.jsonValue).sort().forEach(key => {
|
||||
ordered[key] = this.jsonValue[key]
|
||||
})
|
||||
return ordered
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle() {
|
||||
this.$emit('update:expand', !this.expand)
|
||||
|
||||
try {
|
||||
this.$el.dispatchEvent(new Event("resized"))
|
||||
} catch (e) {
|
||||
// handle IE not supporting Event constructor
|
||||
var evt = document.createEvent("Event")
|
||||
evt.initEvent("resized", true, false)
|
||||
this.$el.dispatchEvent(evt)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<span class="jv-item jv-string">"{{jsonValue}}"</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JsonString',
|
||||
props: {
|
||||
jsonValue: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<span class="jv-item jv-undefined">{{ jsonValue === null ? 'null' : 'undefined' }}</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JsonUndefined',
|
||||
props: {
|
||||
jsonValue: Object
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Generated
+11477
File diff suppressed because it is too large
Load Diff
+25
-5
@@ -1,11 +1,18 @@
|
||||
{
|
||||
"name": "vue-json-viewer",
|
||||
"version": "1.0.4",
|
||||
"version": "2.0.0",
|
||||
"description": "vuejs展示json的组件",
|
||||
"main": "index.js",
|
||||
"main": "lib/index.js",
|
||||
"files": [
|
||||
"lib/*"
|
||||
],
|
||||
"directories": {
|
||||
"lib": "./lib",
|
||||
"example": "./example"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"examples": "webpack-dev-server --config ./examples/build/webpack.dev.conf.js"
|
||||
"example": "webpack-dev-server --config ./example/build/webpack.dev.conf.js"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -15,12 +22,25 @@
|
||||
"vue",
|
||||
"json"
|
||||
],
|
||||
"author": "chenfengjw@hotmail.com",
|
||||
"homepage": "https://github.com/chenfengjw163/vue-json-viewer#readme",
|
||||
"author": {
|
||||
"name": "陈峰",
|
||||
"email": "chenfengjw@hotmail.com"
|
||||
},
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/chenfengjw163/vue-json-viewer/issues"
|
||||
},
|
||||
"homepage": "https://github.com/chenfengjw163/vue-json-viewer#readme",
|
||||
"contributors": [
|
||||
{
|
||||
"name": "陈峰",
|
||||
"email": "chenfengjw@hotmail.com"
|
||||
},
|
||||
{
|
||||
"name": "Sacha Stafyniak",
|
||||
"email": "sacha.stafyniak@gmail.com"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"vue": "^2.5.2",
|
||||
"clipboard": "^1.7.1"
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<span>
|
||||
<j-icon v-if="!keyName" :type="value ? 'arrow-down-b' : 'arrow-up-b'" @click.stop="toggle"></j-icon>
|
||||
<span>[</span>
|
||||
<template v-if="jsonValue.length">
|
||||
<json-box v-show="value" v-for="(val, index) in jsonValue" :key="index" :value="val"></json-box>
|
||||
<span v-show="!value" class="node-ellipsis">...</span>
|
||||
</template>
|
||||
<span>]</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JsonArray',
|
||||
props: {
|
||||
jsonValue: Array,
|
||||
keyName: String,
|
||||
value: Boolean
|
||||
},
|
||||
methods: {
|
||||
toggle() {
|
||||
this.$emit('input', !this.value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<span class="json-boolean">{{jsonValue}}</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JsonBoolean',
|
||||
props: {
|
||||
jsonValue: Boolean
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.json-boolean {
|
||||
color: #fc1e70;
|
||||
}
|
||||
</style>
|
||||
@@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<span class="json-number">{{jsonValue}}</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JsonNumber',
|
||||
props: {
|
||||
jsonValue: Number
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.json-number {
|
||||
color: #fc1e70;
|
||||
}
|
||||
</style>
|
||||
@@ -1,36 +0,0 @@
|
||||
<template>
|
||||
<span>
|
||||
<j-icon v-if="!keyName" :type="value ? 'arrow-down-b' : 'arrow-up-b'" @click.stop="toggle"></j-icon>
|
||||
<span>{</span>
|
||||
<template v-if="Object.keys(jsonValue).length">
|
||||
<json-box v-show="value" v-for="(v, k) in jsonValue" :key="k" :key-name="k" :value="v"></json-box>
|
||||
<span v-show="!value" class="node-ellipsis">...</span>
|
||||
</template>
|
||||
<span>}</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JIcon from '../json-icon'
|
||||
export default {
|
||||
name: 'JsonObject',
|
||||
props: {
|
||||
jsonValue: Object,
|
||||
keyName: String,
|
||||
value: Boolean
|
||||
},
|
||||
methods: {
|
||||
toggle() {
|
||||
console.log('toggle')
|
||||
this.$emit('input', !this.value);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
JIcon
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<span class="json-string">"{{jsonValue}}"</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JsonString',
|
||||
props: {
|
||||
jsonValue: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.json-string {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user