perf[json-editor]:refine css

src/components/JsonEditor/index.vue

@@ -53,11 +53,16 @@ export default {
 }
 </script>
 
-<style>
-.CodeMirror {
+<style scoped>
+.json-editor{
   height: 100%;
+  position: relative;
 }
-.json-editor .cm-s-rubyblue span.cm-string {
+.json-editor >>> .CodeMirror {
+  height: auto;
+  min-height: 300px;
+}
+.json-editor >>> .cm-s-rubyblue span.cm-string {
   color: #F08047;
 }
 </style>

src/styles/index.scss

@@ -140,10 +140,6 @@ code {
   margin-top: 30px;
 }
 
-.editor-container .CodeMirror {
-  height: 100%!important;
-}
-
 .text-center {
   text-align: center
 }

src/views/components-demo/jsonEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="components-container" style="height:100vh">
+  <div class="components-container">
     <code>JsonEditor is base on  <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a> , lint base on json-lint </code>
     <div class="editor-container">
       <json-editor ref="jsonEditor" v-model="value"></json-editor>