更改版本号

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>

examples/components/Codemirror.vue

@@ -0,0 +1,58 @@
+<template>
+  <codemirror v-model="content" :options="cmOptions" />
+</template>
+<script>
+import { codemirror } from 'vue-codemirror'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/idea.css'
+import 'codemirror/theme/duotone-light.css'
+import 'codemirror/mode/javascript/javascript.js'
+import 'codemirror/mode/sql/sql.js'
+export default {
+  components: { codemirror },
+  props: {
+    readOnly: {
+      type: Boolean,
+      default: true
+    },
+    mode: {
+      type: String,
+      default: 'text/javascript'
+    },
+    value: {
+      type: String,
+      required: true
+    },
+    theme: {
+      type: String,
+      default: 'idea'
+    },
+    lineNumbers: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    value: {
+      handler: function (newVal) {
+        this.content = newVal
+      }
+    },
+    content: function (newVal) {
+      this.$emit('input', newVal)
+    }
+  },
+  data () {
+    return {
+      content: this.value,
+      cmOptions: {
+        tabSize: 2,
+        mode: this.mode,
+        theme: this.theme,
+        lineNumbers: this.lineNumbers,
+        readOnly: this.readOnly
+      }
+    }
+  }
+}
+</script>

examples/main.js

@@ -1,7 +1,9 @@
 import Vue from 'vue'
 import App from './App.vue'
 import JsonSchemaEditor from '../packages/index'
+import { Modal } from 'ant-design-vue'
 Vue.config.productionTip = false
+Vue.use(Modal)
 Vue.use(JsonSchemaEditor)
 
 new Vue({