feat: 增加directComponents设置项

lib/component/main.js

@@ -5,6 +5,7 @@ import datasource from './mixins/datasource'
 import listeners from './mixins/listeners'
 import functional from './mixins/functional'
 import reference from './mixins/reference'
+import node from './mixins/node'
 import { Node } from './node'
 
 export const Main = {
@@ -21,7 +22,7 @@ export const Main = {
     options: Object
   },
   components: { 'v-jform-node': Node },
-  mixins: [reference, functional, datasource, listeners],
+  mixins: [reference, functional, datasource, listeners, node],
   data() {
     return {
       registry: null,
@@ -81,21 +82,7 @@ export const Main = {
     return h(
       this.tag,
       { class: ['v-jform'] },
-      this.renders
-        .filter(item => item)
-        .map(item =>
-          h('v-jform-node', {
-            slot: (item.fieldOptions || {}).slot,
-            scopedSlots: (item.fieldOptions || {}).scopedSlots,
-            props: {
-              context: this.context,
-              field: item,
-              registry: this.registry,
-              components: this.components,
-              options: this.options
-            }
-          })
-        )
+      this.renders.filter(item => item).map(item => this.renderNode(h, item))
     )
   },
   beforeDestory() {

lib/component/mixins/node.js

@@ -0,0 +1,45 @@
+export default {
+  computed: {
+    ignoreNodeWrappers() {
+      return (this.options || {}).directComponents || []
+    }
+  },
+  methods: {
+    resolveField(field) {
+      const renderField = {
+        ...field,
+        children: [].concat(field.children)
+      }
+
+      this.registry.provider
+        .useOptions({ ...this.options, registry: this.registry })
+        .execute(renderField, this.context)
+
+      return renderField
+    },
+    renderNode(h, field) {
+      const { component, fieldOptions, key, children } = field
+
+      return !this.ignoreNodeWrappers.includes(component)
+        ? h('v-jform-node', {
+            slot: (fieldOptions || {}).slot,
+            scopedSlots: (fieldOptions || {}).scopedSlots,
+            props: {
+              context: this.context,
+              field: field,
+              registry: this.registry,
+              components: this.components,
+              options: this.options
+            }
+          })
+        : h(
+            this.components[component] || component,
+            {
+              ...fieldOptions,
+              key: fieldOptions.key || key
+            },
+            (children || []).map(child => this.renderNode(h, child))
+          )
+    }
+  }
+}

lib/component/node.js

@@ -1,4 +1,5 @@
 import { isArray } from 'lodash-es'
+import node from './mixins/node'
 
 export const Node = {
   name: 'v-jform-node',
@@ -9,20 +10,14 @@ export const Node = {
     components: Object,
     options: Object
   },
+  mixins: [node],
   mounted() {
     Object.assign(this.context.refs, this.$refs)
   },
   render(h) {
-    const renderField = {
-      ...this.field,
-      children: [].concat(this.field.children)
-    }
-
-    this.registry.provider
-      .useOptions({ ...this.options, registry: this.registry })
-      .execute(renderField, this.context)
-
-    const { component, fieldOptions = {}, key, children } = renderField
+    const { component, fieldOptions = {}, key, children } = this.resolveField(
+      this.field
+    )
 
     return h(
       this.components[component] || component,
@@ -32,19 +27,7 @@ export const Node = {
       },
       (isArray(children) ? children : [])
         .filter(child => child)
-        .map(child =>
-          h('v-jform-node', {
-            slot: (child.fieldOptions || {}).slot,
-            scopedSlots: (child.fieldOptions || {}).scopedSlots,
-            props: {
-              context: this.context,
-              field: child,
-              registry: this.registry,
-              components: this.components,
-              options: this.options
-            }
-          })
-        )
+        .map(child => this.renderNode(h, child))
     )
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vjform",
   "description": "Vue JSON Form",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "private": false,
   "author": {
     "name": "fyl080801",

src/App.jsx

@@ -7,7 +7,8 @@ export default Vue.extend({
         <p>
           <router-link to="/basic">Basic</router-link> |
           <router-link to="/source">Source</router-link> |
-          <router-link to="/fx">Functional</router-link>
+          <router-link to="/fx">Functional</router-link> |
+          <router-link to="/tabs">Tabs</router-link>
         </p>
         <router-view />
       </div>

src/router/index.js

@@ -10,7 +10,8 @@ const routes = [
   { path: '/', component: Basic },
   { path: '/basic', component: Basic },
   { path: '/source', component: SourceTest },
-  { path: '/fx', component: FxTest }
+  { path: '/fx', component: FxTest },
+  { path: '/tabs', component: () => import('../views/Tabs.vue') }
 ]
 
 const router = new VueRouter({

src/views/Tabs.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <v-jform
+      :fields="fields"
+      v-model="model"
+      :params="params"
+      :datasource="datasource"
+      :components="components"
+      :listeners="listeners"
+      :options="options"
+    ></v-jform>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      params: {},
+      model: {},
+      components: {},
+      datasource: {},
+      listeners: [],
+      fields: [
+        {
+          component: 'div',
+          children: [
+            {
+              component: 'el-tabs',
+              children: [
+                {
+                  component: 'el-tab-pane',
+                  fieldOptions: { props: { label: 'tab1' } }
+                },
+                {
+                  component: 'el-tab-pane',
+                  fieldOptions: { props: { label: 'tab2' } }
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      options: {
+        directComponents: ['el-tab-pane']
+      }
+    }
+  }
+}
+</script>