mirror of
https://github.com/tenrok/vue-json-viewer.git
synced 2026-06-23 20:40:38 +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
|
# 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:
|
Using npm:
|
||||||
```
|
```
|
||||||
$ npm install vue-json-viewer
|
$ npm install vue-json-viewer --save
|
||||||
```
|
```
|
||||||
Using bower:
|
|
||||||
|
|
||||||
|
|
||||||
|
Using yarn:
|
||||||
```
|
```
|
||||||
$ yarn add vue-json-viewer
|
$ yarn add vue-json-viewer
|
||||||
```
|
```
|
||||||
|
|
||||||
## Example:
|
## Example
|
||||||
|
|
||||||
``` html
|
``` html
|
||||||
<json-viewer :value="jsonData" :show-copy="true" icon-prefix="ion" :show-bigger="true"></json-viewer>
|
<json-viewer :value="jsonData"></json-viewer>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
<json-viewer
|
||||||
|
:value="jsonData"
|
||||||
|
:expand-depth=5
|
||||||
|
copyable
|
||||||
|
boxed
|
||||||
|
sort></json-viewer>
|
||||||
```
|
```
|
||||||
|
|
||||||
``` js
|
``` js
|
||||||
export default {
|
import Vue from 'vue'
|
||||||
name: 'Page',
|
import JsonViewer from '../lib'
|
||||||
|
|
||||||
|
// Import JsonViewer as a Vue.js plugin
|
||||||
|
Vue.use(JsonViewer)
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
el: '#app',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
jsonData: {
|
jsonData: {
|
||||||
name: [
|
total: 25,
|
||||||
{key: 2},
|
limit: 10,
|
||||||
{key: 'hello word'},
|
skip: 0,
|
||||||
],
|
links: {
|
||||||
val: {
|
previous: undefined,
|
||||||
b: 'a',
|
next: function () {},
|
||||||
a: 'hello word',
|
},
|
||||||
asd2: 1,
|
data: [
|
||||||
asd: false
|
{
|
||||||
|
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');
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
entry: './examples/app.js',
|
entry: './example/app.js',
|
||||||
output: {
|
output: {
|
||||||
path: path.join(__dirname, '../dist'),
|
path: path.join(__dirname, '../dist'),
|
||||||
filename: 'main.js'
|
filename: 'main.js'
|
||||||
},
|
},
|
||||||
devtool: 'cheap-module-source-map',
|
devtool: 'cheap-module-source-map',
|
||||||
devServer: {
|
devServer: {
|
||||||
port: 8080
|
port: 8081
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: ['.js', '.vue'],
|
extensions: ['.js', '.vue'],
|
||||||
@@ -59,7 +59,7 @@ module.exports = {
|
|||||||
plugins: [
|
plugins: [
|
||||||
new HtmlWebpackPlugin({
|
new HtmlWebpackPlugin({
|
||||||
filename: 'index.html',
|
filename: 'index.html',
|
||||||
template: './examples/index.html',
|
template: './example/index.html',
|
||||||
inject: true
|
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",
|
"name": "vue-json-viewer",
|
||||||
"version": "1.0.4",
|
"version": "2.0.0",
|
||||||
"description": "vuejs展示json的组件",
|
"description": "vuejs展示json的组件",
|
||||||
"main": "index.js",
|
"main": "lib/index.js",
|
||||||
|
"files": [
|
||||||
|
"lib/*"
|
||||||
|
],
|
||||||
|
"directories": {
|
||||||
|
"lib": "./lib",
|
||||||
|
"example": "./example"
|
||||||
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1",
|
"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": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
@@ -15,12 +22,25 @@
|
|||||||
"vue",
|
"vue",
|
||||||
"json"
|
"json"
|
||||||
],
|
],
|
||||||
"author": "chenfengjw@hotmail.com",
|
"homepage": "https://github.com/chenfengjw163/vue-json-viewer#readme",
|
||||||
|
"author": {
|
||||||
|
"name": "陈峰",
|
||||||
|
"email": "chenfengjw@hotmail.com"
|
||||||
|
},
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/chenfengjw163/vue-json-viewer/issues"
|
"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": {
|
"dependencies": {
|
||||||
"vue": "^2.5.2",
|
"vue": "^2.5.2",
|
||||||
"clipboard": "^1.7.1"
|
"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