更改版本号

examples/App.vue

@@ -1,20 +1,45 @@
 <template>
   <div id="app">
-    <div class="title">
-      Demo
+    <div class="title">   
+      <a href="https://github.com/zyqwst/json-schema-editor-vue" target="_blank">json-schema-editor-vue</a> Preview
+    </div>
+    <div class="desc">
+      <div>A json-schema editor of high efficient and easy-to-use, base on Vue. 
+        <a @click="visible = true">import json</a>
+      </div>
     </div>
     <div class="container">
-      <pre>{{tree}}</pre>
+      <codemirror class="code" v-model="jsonStr" :readOnly="false"/>
       <json-schema-editor class="schema" :value="tree" disabledType lang="zh_CN" custom/>
     </div>
+    <a-modal v-model="visible" title="import json" width="800px" height="600x" @ok="handleImportJson">
+      <div class="code-container">
+        <codemirror class="code" v-model="importJson" :readOnly="false"/>
+      </div>
+    </a-modal>
   </div>
 </template>
 
 <script>
+import Codemirror  from './components/Codemirror.vue'
+import GenerateSchema from 'generate-schema'
 export default {
   name: 'App',
+  components: { Codemirror },
+  computed: {
+    jsonStr: {
+      get: function () {
+        return JSON.stringify(this.tree, null, 2)
+      },
+      set: function (newVal) {
+        this.tree = JSON.parse(newVal)
+      }
+    }
+  },
   data() {
     return {
+      importJson: '',
+      visible: false,
       tree:
       {
   "root": {
@@ -45,6 +70,14 @@ export default {
   }
 }
     }
+  },
+  methods: {
+    handleImportJson () {
+      const  t = GenerateSchema.json(JSON.parse(this.importJson))
+      delete t.$schema
+      this.tree.root = t
+      this.visible = false
+    }
   }
 }
 </script>
@@ -61,6 +94,14 @@ export default {
   height:100px;
   line-height: 100px;
 }
+.desc{
+  padding:20px;
+  width:80vw;
+  min-width:800px;
+  margin:auto;
+  padding: 0 3em;
+  font-size: 1.2em;
+}
 .container{
   display: flex;
   padding:20px;
@@ -70,14 +111,9 @@ export default {
   height: calc(100vh - 150px);
   margin:auto;
 }
-.container>pre {
-  font-family: monospace;
-  height: 100%;
-  overflow-y: auto;
-  border:1px solid rgba(0,0,0,.1);
-  border-radius: 8px;
-  padding: 12px;
-  width:50%
+.code-container{
+  max-height: 600px;
+  overflow: auto;
 }
 .schema{
   margin-left: 20px;
@@ -89,4 +125,15 @@ export default {
   border-radius: 8px;
   padding: 12px;
 }
+.CodeMirror {
+  height: 100% !important;
+}
+.vue-codemirror{
+  flex:1;
+  margin: 0 24px;
+  border: 1px solid rgba(0,0,0,.1);
+  min-height:300px;
+  overflow: auto;
+  border-radius: 6px;
+}
 </style>