在JsonEditor中注册JsonView组件

infjer · infjer · commit a61d4eef502e · 2019-12-13T11:19:56.000+08:00
支持组件局部注册、动态（异步）导入组件
删除Array.prototype.rmIndex，直接使用splice
解决JsonView和ArrayView的循环依赖
diff --git a/dist/vue-json-edit.js b/dist/vue-json-edit.js
diff --git a/example/dist/index.html b/example/dist/index.html
@@ -53,5 +53,5 @@
   <body>
     <div id="app"></div>
     <!-- built files will be auto injected -->
- <script type="text/javascript" src="main_f45493d742150e6923c6.js"></script></body>
+ <script type="text/javascript" src="main_e553d33721a8c3461999.js"></script></body>
 </html>
diff --git a/example/dist/main_e553d33721a8c3461999.js b/example/dist/main_e553d33721a8c3461999.js
diff --git a/src/ArrayView.vue b/src/ArrayView.vue
@@ -111,11 +111,12 @@ export default {
     } 
   },
   components: {
-    "item-add-form": ItemAddForm
+    "item-add-form": ItemAddForm,
+    "json-view": () => import("./JsonView.vue")
   },
   methods: {
     delItem: function(parentDom, item, index) {
-      this.flowData = this.flowData.rmIndex(index);
+      this.flowData.splice(index, 1);
       if (this.hideMyItem[index]) this.hideMyItem[index] = false;
       this.$emit("input", this.flowData);
     },
diff --git a/src/JsonEditor.vue b/src/JsonEditor.vue
@@ -5,6 +5,8 @@
 </template>
 
 <script>
+import JsonView from "./JsonView.vue";
+
 export default {
   name: "JsonEditor",
   props: {
@@ -54,6 +56,9 @@ export default {
       deep: true
     }
   },
+  components: {
+    "json-view": JsonView
+  },
   methods: {
     jsonParse: function (jsonStr) {
       let parseJson = json => {
@@ -63,8 +68,6 @@ export default {
           let val = json[k];
           let parsedVal = val;
 
-          console.log('k', val)
-
           if (this.getType(val) == "object") {
             parsedVal = parseJson(val);
 
diff --git a/src/JsonView.vue b/src/JsonView.vue
@@ -110,11 +110,12 @@ export default {
     }
   },
   components: {
-    "item-add-form": ItemAddForm
+    "item-add-form": ItemAddForm,
+    "array-view": () => import("./ArrayView.vue")
   },
   methods: {
     delItem: function(parentDom, item, index) {
-      this.flowData = this.flowData.rmIndex(index);
+      this.flowData.splice(index, 1);
       if (this.hideMyBlock[index]) this.hideMyBlock[index] = false;
       this.$emit("input", this.flowData);
     },
diff --git a/src/index.js b/src/index.js
@@ -12,10 +12,6 @@ const install = (Vue) => {
   Vue.component('json-view', JsonView)
   Vue.component('array-view', ArrayView)
 
-  Array.prototype.rmIndex = function (index) {
-    this.splice(index, 1)
-    return this
-  }
 }
 
 export default install

Original file line number	Diff line number	Diff line change
`@@ -12,10 +12,6 @@ const install = (Vue) => {`
`12`	`12`	`Vue.component('json-view', JsonView)`
`13`	`13`	`Vue.component('array-view', ArrayView)`
`14`	`14`
`15`		`- Array.prototype.rmIndex = function (index) {`
`16`		`- this.splice(index, 1)`
`17`		`- return this`
`18`		`- }`
`19`	`15`	`}`
`20`	`16`
`21`	`17`	`export default install`