mirrors/vue-json-viewer
2
0
Fork 0
mirror of https://github.com/tenrok/vue-json-viewer.git synced 2026-06-23 20:40:38 +03:00
Code Activity

change examples

Browse Source
This commit is contained in:
陈峰
2018-07-02 17:25:09 +08:00
parent 3410c5ea6a
commit cb23336f06
3 changed files with 54 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+38
View File
@@ -1 +1,39 @@
# vue-json-viewer # vue-json-viewer
简单json展示工具，基于vue框架开发的展示组件
Examples:
安装：
``` cli
npm install vue-json-viewer
```
or
``` cli
yarn add vue-json-viewer
```
使用：
``` js
export default {
name: 'Page',
data() {
return {
jsonData: {
name: [
{key: 2},
{key: 'hello word'},
],
val: {
b: 'a',
a: 'hello word',
asd2: 1,
asd: false
}
}
}
}
}
```
examples/app.js
+12 -27
View File
@@ -4,36 +4,21 @@ import './css/ionicons.css';
new Vue({ new Vue({
el: '#app', el: '#app',
render: h => h(JsonViewer, { data() {
domProps: { return {
id: '123' jsonData: {
},
props: {
value: {
name: [ name: [
{name: 2}, {key: 2},
{name: 2}, {key: 'hello word'},
{name: 2},
{name: 2},
{name: 2},
{name: 2},
{name: 2},
{name: 2},
{name: 2},
{name: 2},
{name: 2},
{name: 2},
{name: 2},
], ],
val: { val: {
b: 'a', b: 'a',
a: 'askldjfhlkajshdflhklsdafhkljahsdklfjhlkjsahdflkhaslkjdfhlkashdflkhaslkdhfklashdflkhasljkghlakshdfklhalsjkd', a: 'hello word',
asd2: 1, asd2: 1,
asd: false asd: false
} }
}, }
showCopy: true,
iconPrefix: 'ion'
} }
}) },
components: {JsonViewer}
}) })
examples/index.html
+3 -1
View File
@@ -7,6 +7,8 @@
<title>examples</title> <title>examples</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app">
<json-viewer :value="jsonData" :show-copy="true" icon-prefix="ion" :show-bigger="true"></json-viewer>
</div>
</body> </body>
</html> </html>