change examples

2026-06-11 18:02:29 +03:00 · 2018-07-02 17:25:09 +08:00
parent 3410c5ea6a
commit cb23336f06
3 changed files with 54 additions and 29 deletions
@@ -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
+        }
+      }
+    }
+  }
+}
+```
@@ -4,36 +4,21 @@ import './css/ionicons.css';

 new Vue({
    el: '#app',
-    render: h => h(JsonViewer, {
-        domProps: {
-            id: '123'
-        },
-        props: {
-            value: {
+    data() {
+        return {
+            jsonData: {
                name: [
-                    {name: 2},
-                    {name: 2},
-                    {name: 2},
-                    {name: 2},
-                    {name: 2},
-                    {name: 2},
-                    {name: 2},
-                    {name: 2},
-                    {name: 2},
-                    {name: 2},
-                    {name: 2},
-                    {name: 2},
-                    {name: 2},
+                  {key: 2},
+                  {key: 'hello word'},
                ],
                val: {
-                    b: 'a',
-                    a: 'askldjfhlkajshdflhklsdafhkljahsdklfjhlkjsahdflkhaslkjdfhlkashdflkhaslkdhfklashdflkhasljkghlakshdfklhalsjkd',
-                    asd2: 1,
-                    asd: false
+                  b: 'a',
+                  a: 'hello word',
+                  asd2: 1,
+                  asd: false
                }
-            },
-            showCopy: true,
-            iconPrefix: 'ion'
+              }
        }
-    })
+    },
+    components: {JsonViewer}
 })
@@ -7,6 +7,8 @@
    <title>examples</title>
 </head>
 <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>
 </html>